CSS3中Transform动画属性用法详解

发布时间：2020-03-17 08:30:28 所属栏目：系统来源：站长网

导读：副标题#e# css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器

三维变换使用基于二维变换的相同属性。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;

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

14/15

首页

尾页

重装系统win7的详细步	如何设定win7一键还原
小编教你台式机重装系	怎样重装电脑系统教程