CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放

一.空间（3D）转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
属性：transform

（1）位移效果（Z轴方向需要配合perspective透视使用）

空间位移的目标：使用translate实现元素空间位移效果

语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可） 像素单位数值或百分比

（2）透视效果

目标：使用perspective属性实现透视效果
~~~~加给父级元素
实现近大远小、近实远虚的视觉效果

（3）空间旋转

目标：使用rotate实现元素空间旋转效果

语法 ：
transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值)

Z轴—绕中心点旋转

代码



    
    
    
    
    


    

        
    

X轴—以水平线为轴，绕水平线转

Y轴—以垂直线为轴，绕垂直线转

查看效果：

（4）立体呈现
目标：使用transform-style: preserve-3d呈现立体图形

小实例

代码块



    
    
    
    
    


    

        
前面
        
后面
    

二.3D导航

该过程代码块
/* ①先子绝父相  将两个页面都放在前面重合，橙色会显示在前面 */
        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        .navs li a:first-child {
            background-color: green;
            /* ④按它的坐标轴，将平面前移20px */
            transform: translateZ(20px);
        }   
        .navs li a:last-child {
            background-color: orange;
            /* ②使用rotateX(90deg)将橙色绕X轴旋转90度，竖着变平 */
            /* ③使用translateZ(20px)将平着的页面沿Z轴上移20px */
            transform: rotateX(90deg) translateZ(20px) ;
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }

完整的代码块

    
    
    
    


    

        

            

                首页
                Index
            
            

                登录
                Login
            
            

                注册
                Register
            
        
    

三.3D缩放

            /* 测试缩放效果  在上面的3D导航中可查看缩放效果*/
            transform: scale3d(0.5, 1.1, 2);