css3之3D转换

1. 3d移动 translate3d

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);/* 仅仅是在Z轴上移动（注意：translateZ一般用px单位） */


transform: translateX(100px) translateX(100px) translateX(100px);


transform: translate3d(x, y, z);
/* 其中 x、y、z 分别指要移动的轴的方向的距离 */
/* xyz是不能省的，没有就写0 */

2. 3d旋转 rotate3d

transform: rotateX(45deg);
/*沿着x轴正方向旋转 45度*/
transform: rotateY(45deg);
/*沿着y轴正方向旋转 45deg*/
transform: rotateZ(45deg);
/*沿着Z轴正方向旋转 45deg*/
transform: rotate3d(x, y, z, deg);
/* 沿着自定义轴旋转 deg为角度（了解即可）。*/


/* 举例 */
transform: rotate3d(1, 0, 0, 45deg);
/*就是沿着x轴旋转 45deg*/
transform: rotate3d(1, 1, 0, 45deg);
/*就是沿着对角线旋转 45deg*/

旋转方向判断：左手准则（度数为正，则逆时针）。

3. 透视 perspective

perspective: 1000px;

 （透视值越大，成像更小。）

4. 3d呈现 transfrom-style

• 控制子元素是否开启三维立体环境。
• 代码写给父级，但是影响的是子盒子。

transform-style: flat;
/* 子元素不开启3D立体空间（默认） */
transform-style: preserve-3d;
/* 子元素开启立体空间 */

4. 案例——两面魔方翻转

4.1 导航栏

    
    
    
    
    



    

        
你好呀
        
你是谁
    

4.2 水平方向的旋转

    
    
    
    
    



    

        
翻转
        
我再翻转
    

4.3 旋转木马