3d转换（立方体旋转效果）

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;}