Css3d转换,立方体效果:
1, 重要的属性:perspective、translateY、preserve-3d、perspecctive-origin
2, rotateX()为正值绕x轴顺时针旋转,负值逆时针旋转;如奥运会体操单杠项目;
rotateY()为正值绕Y轴顺时针旋转,负值逆时针旋转;如钢管舞;
rotateZ()从视觉上看,rotateZ()让元素顺时针或逆时针运动;
3, translateZ():元素在Z轴位移,值越大时,元素离观看者越近,视觉上放大,反之变小
4, 格式:
舞台:(perspectiv)
容器:(3D,preserve-3d)
内容
第一步:先步好div的位置:
第二步:对每一个平面进行旋转
.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
.front{transform: translateZ(152px);z-index:2;}
.back{z-index:1;}
第三步:实现对3D立方体的旋转
.container:hover{transform: rotateY(360deg)}
其余代码:
.stage{perspective: 800px;}
.container{width: 150px;height:150px;margin: 200px auto; position: relative;
height:200px;transition:5s;transform-origin: center center 75px;transform-style: preserve-3d;backface-visibility: hidden;}
.container .side{position: absolute;width: 150px;height: 150px;border:2px solid #0033FF;text-align: center;line-height: 150px;}