CSS3 旋转立方体问题详解

• 当元素进行旋转时，他的坐标轴也跟着他进行旋转
• 注意-y方向问题

旋转立方体的效果

分析

•  一个容器包含6个div
• position：absolute 之后6个面完全重合
• 通过trandform：rotateX/Y/Z()，translateX/Y/Z()调整到相应位置
• 添加transition动画效果
• 注意这里面的旋转是绕着他的中心线进行旋转的所以唯一100px
• 他在旋转时，他的坐标轴也是跟着他进行旋转的(这很重要)

代码

    
 
1
2
3
4
5
6

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。