如何解决CSS3旋转立方体问题
导读：本文共1393字符，通常情况下阅读需要5分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 3D坐标概念当元素进行旋转时，他的坐标轴也跟着他进行旋转注意-y方向问题旋转立方体的效果分析一个容器包含6个divposition：absolute 之后6个面完全重合通过trandform：rotateX/Y/Z()，translateX/Y/Z()调整到相应位置添加transition动画效果注意这里面的旋转是绕着他的中心线进行旋转的所以唯一100px他在旋... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。3D坐标概念
当元素进行旋转时，他的坐标轴也跟着他进行旋转
注意-y方向问题
旋转立方体的效果
分析
一个容器包含6个div
position：absolute 之后6个面完全重合
通过trandform：rotateX/Y/Z()，translateX/Y/Z()调整到相应位置
添加transition动画效果
注意这里面的旋转是绕着他的中心线进行旋转的所以唯一100px
他在旋转时，他的坐标轴也是跟着他进行旋转的(这很重要)
代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0px;padding:0px;}body{perspective:800px;background:#000000;}#container{height:200px;width:200px;margin:100pxauto0;position:relative;transform-style:preserve-3d;animation:move1seaseinfinite;}@keyframesmove{from{transform:rotateY(0deg)rotateZ(0deg);}to{transform:rotateY(360deg)rotateZ(360deg);}}#container>div{height:100%;width:100%;border-radius:5px;background:rgba(255,255,255,0.5);position:absolute;left:0px;right:0px;text-align:center;line-height:200px;font-size:30px;}#one{transform:rotateX(-90deg)translateZ(100px);}#two{transform:translateZ(100px);}#three{transform:rotateY(-90deg)translateZ(100px);}#four{transform:rotateY(-180deg)translateZ(100px);}#five{transform:rotateY(90deg)translateZ(100px);}#six{transform:translateZ(-100px);}</style></head><body><divid="container"><divid="one">1</div><divid="two">2</div><divid="three">3</div><divid="four">4</div><divid="five">5</div><divid="six">6</div></div></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
如何解决CSS3旋转立方体问题的详细内容，希望对您有所帮助，信息来源于网络。