立方体的实现 2
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--這個是利用的是基點的去旋轉效果得到把基點放在中間，去旋轉就可以得到想要的，如何旋轉就要看自己的想象辣--><style type="text/css">*{margin: 0;padding: 0;}#wrap{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 300px;height: 300px;border: 1px solid;perspective: 200px;/*transform-style: preserve-3d;*/}#wrap > .box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;transition:3s ;transform-style: preserve-3d;transform-origin: center center -50px; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;text-align: center;font: 50px/100px "微軟雅黑";background: rgba(123,223,333,.3);transform-origin: center center -50px;backface-visibility: hidden;}#wrap > .box > div:nth-child(5){transform: rotateX(-90deg);}#wrap > .box > div:nth-child(6){transform: rotateX(90deg);}#wrap > .box > div:nth-child(3){transform: rotateY(-90deg);}#wrap > .box > div:nth-child(4){transform: rotateY(90deg);}#wrap > .box > div:nth-child(2){/*transform: translateZ(-100px) rotateZ(180deg);*/transform: rotateY(180DEG) rotateZ(180DEG);}#wrap > .box > div:nth-child(1){}#wrap:hover .box{transform: rotate3d(1,1,1,180deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body>
</html>
效果圖：
?
轉載于:https://www.cnblogs.com/caicaihong/p/9636221.html
總結
- 上一篇： 小程序---模板的引用与使用
- 下一篇： 免费域名和收费域名