CSS3 3D变换

  CSS3 3D变换

使用3D变换时要加上内核（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 /  -moz- :Firefox 内核 / -o-: Opera 内核）

使用 3D变换 步骤：

1.transform-style: preserve-3d    // 建立3D空间

2. 设置景深  perspective:100px;  // 有近大远小的感觉  , 距离我看他的地方

 示例：

1. .box{width:100px;height:100px;padding:100px;border:5px solid #000;margin:30px auto;-webkit-transform-style:preserve-3d;-webkit-perspective:100px; } // 建立3D空间 ，设置景深
2. .div1{width:100px;height:100px;background:red;transition:1s;} // 加个过渡
3. .box:hover .div1{-webkit-transform:rotateX(180deg)} // X轴旋转180度

3. perspective-origin   设置景深的基点   就是你站在什么方位去看这盒子

示例：

1. -webkit-perspective-origin:left top // 左上角观看

transform 下新增函数

 1.rotateX( 180deg )    -->>   X轴 旋转

 2.rotateY(180deg)      -->> Y 轴 旋转

 3.rotateZ(180deg)       -->> Z 轴 旋转    Z轴就是电脑屏幕的

 4.translateZ(100px)     -->>  Z 轴的移动 (离自己近感觉变大了，离自己远感觉变小了)可以是负值，和景深的值一起调试

 5.scaleZ()          -->>

示例：旋转的盒子

5. charset="UTF-8">
9. class="wrap">
10. class="box">
11. 1
12. 2
13. 3
14. 4
15. 5
16. 6