目录
前言
正文
1.基本架构
2.书写每个div样式
3.为需要产生动画的一面单独设置样式
4.设置鼠标hover效果
5.优化
总结
纯CSS实现3D正方体动画效果，此方法是通过transform的旋转（rotate）和位移（translate）实现的，具体效果是鼠标滑过时正方体的一个面会产生位移
效果图
先在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>效果：
可以先将cube-3D下的div设置透明度，方便观察
其中核心的代码时cube-3D里的 transform-style: preserve-3d;
在foot（正方体的底面）添加一个类（foot-hover），单独设置这个面的样式
.foot-hover { background-color: #8BC65A !important; opacity: 0.8; }效果：
我们要的效果就是鼠标移上去底面往下移动一段距离，那么在hover时只需设置translateY的值即可
代码：
.cube:hover .foot-hover { transform: translateY(40px) rotatex(-90deg); }效果：
这时我们会发现，正方体底部会出现镂空的效果，不太好看，我们想要的是下图的这种效果，其实实现很简单
其实实现上图那种效果并不是很麻烦，只需要再复制一个底部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命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!
