CSS3中Transform动画属性用法详解(11)

发布时间：2020-03-15 08:13 所属栏目：52 来源：站长网

导读：三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()

三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数：
•3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
•3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
•3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
•3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

还有以下几个转换属性：
•transform-style：规定被嵌套元素如何在 3D 空间中显示。
•perspective：规定 3D 元素的透视效果。
•perspective-origin：规定 3D 元素的底部位置。
•backface-visibility：定义元素在不面对屏幕时是否可见。

目前各大主流浏览器对transform 3d属性的兼容性还不是特别好，感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法：

rotateX()方法，围绕其在一个给定度数X轴旋转的元素；
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素；
rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

JavaScript Code复制内容到剪贴板

<!DOCTYPE html>

<head>

<title>transform 3d </title>

margin: 0;

padding: 0;

}

#container{

width: 440px;

height: 120px;

border: 1px solid blue;

margin: 20px auto;

padding: 20px 20px;

}

#div1 ,#div2, #div3, #div4{

height: 100px;

width: 100px;

border: 1px dashed red;

display: inline-block;

}

#div1 div{

height: 100px;

width: 100px;

background: #63F7ED;

transform:rotateX(45deg); /* W3C标准 */

-webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */

}

#div2{margin-left: 50px;}

#div2 div{

height: 100px;

width: 100px;

background: #63F7ED;

（编辑：ASP站长网）