这个效果的代码如下:
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>我的首页</title> | |
| <style> | |
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| perspective:800px; | |
| } | |
| .box{ | |
| position:relative; | |
| width:200px; | |
| height:200px; | |
| margin:100px auto; | |
| /* background-color:pink; */ | |
| /* transform-origin:0 0; */ | |
| /* transform:skew(0deg,0deg); */ | |
| transform-style:preserve-3d;/*让子级元素 在 3D空间占据位置*/ | |
| transition:10s; | |
| } | |
| .box:hover{ | |
| transform:rotateX(360deg) rotateY(360deg); | |
| } | |
| .box .face{ | |
| position:absolute; | |
| left:0; | |
| top:0; | |
| width:200px; | |
| height:200px; | |
| /* background-color:rgba(0,0,0,.5); */ | |
| box-shadow:0 0 10px 0 blue inset; | |
| } | |
| .box .front{ | |
| transform:translateZ(100px); /* z轴平移100px */ | |
| } | |
| .box .behind{ | |
| transform:rotateY(180deg) translateZ(100px); /* z轴平移100px */ | |
| } | |
| .box .left{ | |
| transform:rotateY(-90deg) translateZ(100px); /* z轴平移100px */ | |
| } | |
| .box .right{ | |
| transform:rotateY(90deg) translateZ(100px); /* z轴平移100px */ | |
| } | |
| .box .top{ | |
| transform:rotateX(90deg) translateZ(100px); /* z轴平移100px */ | |
| } | |
| .box .bottom{ | |
| transform:rotateX(-90deg) translateZ(100px); /* z轴平移100px */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="face top">上面</div> | |
| <div class="face bottom">下面</div> | |
| <div class="face left">左面</div> | |
| <div class="face right">右面</div> | |
| <div class="face front">前面</div> | |
| <div class="face behind">后面</div> | |
| </div> | |
| </body> | |
| </html> |
代码源于课堂老师.---海文老师.