转换 css3-CSS3 3D 转换

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在学习本节之前，先看一下 3D 坐标轴。

用X、Y、Z表示空间的三个维度，三个轴相互垂直。

3D 变换

CSS3 允许您使用 3D 变换缩小元素的尺寸。

在本章中，您将学习其中一些 3D 变换方法：

旋转X()

旋转Y()

浏览器支持

旋转 X() 方法

rotateX() 方法，将元素绕其 X 轴旋转给定的角度。

 
 

    #test{
        height:200px;
        width:200px;
        position:absolute;
        margin-top:100px;
        margin-left:100px;
    }
    #test div{
        height:200px;
        width:200px;
        background:lightblue;
        -webkit-transition: all .6s;
    }
    #test div:hover{
        -webkit-transform:rotateX(90deg);
    }


    

        

    

旋转Y()方法

rotateY() 方法，将元素绕其 Y 轴旋转给定的角度。

 
 

    #test{
        width:400px;
        height:400px;
        position:absolute;
        margin-left:100px;
        margin-top: 100px;
        /* 光源设置为离页面200像素的位置 */
        perspective:200px;
    }
    #test1{
        width:400px;
        height:400px;
        position:relative;
        /* 相当于指定一个3D的空间 */
        transform-style:preserve-3d;
    }
    #div2{
        width:400px;
        height:400px;
        position:relative;
        background:lightcoral;
        /* 指定变换效果，变换时间为1S */
        -webkit-transition: all 1s;
    }
    #test #test1:hover #div2{
        /* 绕Y轴旋转180度 */
        -webkit-transform: rotateY(180deg);
    }


    

        

            

        
        
    

转换属性

下表列出了所有转换属性：

属性描述 CSS

变换对元素应用 2D 或 3D 变换。 3

transform-origin 允许您更改变换后的元素的位置。 3

变换样式指定嵌套元素在 3D 空间中的显示方式。 3

透视指定 3D 元素的透视效果。 3

透视原点指定 3D 元素的顶部位置。 3

backface-visibility 定义元素在不面向屏幕时是否可见。 3

3D转换方法

功能说明

Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 使用 16 个值的 4x4 矩阵定义 3D 变换。

translate3d(x,y,z) 定义 3D 变换。

translateX(x) 定义 3D 平移，仅使用 X 轴的值。

translateY(y) 定义 3D 平移，仅使用 Y 轴的值。

translateZ(z) 定义 3D 平移，仅使用 Z 轴的值。

scale3d(x,y,z) 定义 3D 缩放变换。

在给定 X 轴值的情况下转换 css3，scaleX(x) 定义 3D 缩放变换。

在给定 Y 轴值的情况下，scaleY(y) 定义 3D 缩放变换。

在给定 Z 轴值的情况下转换 css3，scaleZ(z) 定义 3D 缩放变换。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿 X 轴的 3D 旋转。

rotateY(angle) 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

Perspective(n) 定义 3D 变换元素的透视图。