纯CSS实现3D正方体动画效果
前言
纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移
效果图
正文
1.基本架构
先在body里添加div作为参考,再在这个div里添加六个div,分别代表正方体的六个面
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot" >下</div> </div> </div>
2.书写每个div样式
.cube { height: 300px; width: 240px; text-align: center; float: left; } .cube-3D { width: 41px; height: 41px; margin: auto; margin-top: 50px; text-align: center; transform: rotateX(45deg) rotateY(-45deg); transform-style: preserve-3d; font-size: 0; } .cube-3D div { width: 41px; height: 41px; position: absolute; left: 0; top: 0; /* opacity: 0.5; */ background-color: white; border: 0.5px solid #82C14C; transition: 0.6s; } .front {transform: translateZ(21px);} .rear {transform: translateZ(-21px);} .left {transform: translateX(-21px) rotateY(-90deg);} .right {transform: translateX(21px) rotateY(-90deg);} .top {transform: translateY(-21px) rotateX(90deg);} .foot {transform: translatey(21px) rotateX(-90deg);}
效果:
可以先将cube-3D下的div设置透明度,方便观察
其中核心的代码时cube-3D里的 transform-style: preserve-3d;
3.为需要产生动画的一面单独设置样式
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot foot-hover" >下</div> </div> </div>
在foot(正方体的底面)添加一个类(foot-hover),单独设置这个面的样式
.foot-hover, { background-color: #8BC65A !important; opacity: 0.8; }
效果:
4.设置鼠标hover效果
我们要的效果就是鼠标移上去底面往下移动一段距离,那么在hover时只需设置translateY的值即可
代码:
.cube:hover .foot-hover { transform: translateY(40px) rotatex(-90deg); }
效果:
这时我们会发现,正方体底部会出现镂空的效果,不太好看,我们想要的是下图的这种效果,其实实现很简单
5.优化
其实实现上图那种效果并不是很麻烦,只需要再复制一个底部div就行,再改一下颜色即可
代码如下:
<div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot" style="background-color: #E4F0DA;">下</div> <div class="foot foot-hover" >下</div> </div> </div>
由于行内样式优先级高于外部样式,所以行内样式会覆盖外部样式的背景颜色。
再将div为cube的盒子再复制四个,改一下cube的rotateX和rotateY的值即可,完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D</title> <style type="text/css"> /* 研究开始 */ .yan-Jiu { height: 510px; width: 100%; margin-top: 100px; background-color: #eee; } .yan-Jiu-center { width: 1200px; margin: auto; height: 420px; color: #6B6B6B; } .cube-3D { width: 41px; height: 41px; margin: auto; margin-top: 50px; text-align: center; transform: rotateX(45deg) rotateY(-45deg); transform-style: preserve-3d; font-size: 0; } .cube-3D div { width: 41px; height: 41px; position: absolute; left: 0; top: 0; /* opacity: 0.5; */ background-color: white; border: 0.5px solid #82C14C; transition: 0.6s; } .front { transform: translateZ(21px); } .rear { transform: translateZ(-21px); } .left { transform: translateX(-21px) rotateY(-90deg); } .right { transform: translateX(21px) rotateY(-90deg); } .top { transform: translateY(-21px) rotateX(90deg); } .foot { transform: translatey(21px) rotateX(-90deg); } .cube { height: 300px; width: 240px; text-align: center; float: left; } .foot-hover, .right-hover, .top-hover, .front-hover { background-color: #8BC65A !important; opacity: 0.8; } .yan-Jiu:hover .foot-hover { transform: translateY(40px) rotatex(-90deg); } .yan-Jiu:hover .right-hover { transform: translateX(40px) rotateY(-90deg); } .yan-Jiu:hover .top-hover { transform: translateY(-40px) rotateX(90deg); } .yan-Jiu:hover .front-hover { transform: translatez(40px); } .yj-3d-3 { transform: rotateX(-45deg) rotateY(-45deg); } </style> </head> <body> <div class="yan-Jiu w"> <div class="yan-Jiu-body ban"> <div class="yan-Jiu-center"> <div class="cube"> <div class="cube-3D"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot " style="background-color: #E4F0DA;">下</div> <div class="foot foot-hover">下</div> </div> </div> <div class="cube "> <div class="cube-3D "> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right right-hover">右</div> <div class="right " style="background-color: #E4F0DA;">下</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D yj-3d-3"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right right-hover">右</div> <div class="right" style="background-color: #E4F0DA;">下</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D yj-3d-3"> <div class="front">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top " style="background-color: #E4F0DA;">下</div> <div class="top top-hover">上</div> <div class="foot">下</div> </div> </div> <div class="cube"> <div class="cube-3D"> <div class="front " style="background-color: #E4F0DA;">下</div> <div class="front front-hover">前</div> <div class="rear">后</div> <div class="left">左</div> <div class="right">右</div> <div class="top">上</div> <div class="foot">下</div> </div> </div> </div> </div> </div> </body> </html>
总结
以上就是今天小谭要分享的内容,小谭也只是刚刚入门的萌新,代码写的不是很规范,在给div命名时也很随意,如果有什么不足之处也请各位大佬手下留情,多多包涵,小谭也欢迎各位大佬指点一二,小谭不胜荣幸,感谢包容,感谢观看,靴靴!