CSS3中Transform动画属性用法详解

发布时间：2020-03-16 02:12:54 所属栏目：系统来源：站长网

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

副标题[/!--empirenews.page--]

css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性，本文重点介绍Transform的使用方法，具体内容如下

浏览器支持情况：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

2D transform变换方法

CSS3中Transform动画属性用法详解

•translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。
•rotate(angle)方法，表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。
•scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。
•skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg
•matrix(n,n,n,n,n,n)方法，以一个含六值的变换矩阵的形式指定一个2D变换，此属性值使用涉及到数学中的矩阵，感兴趣的读者可以深入了解一下，这里就不做详细介绍了。

下面是上面方法的演示：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<head>

<title>transform 2D演示</title>

#container{

width: 700px;

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:translate(20px,10px); /* W3C标准 */

-ms-transform:translate(20px,10px); /* IE 9 */

-moz-transform:translate(20px,10px); /* Firefox */

-webkit-transform:translate(20px,10px); /* Safari 和 Chrome */

-o-transform:translate(20px,10px); /* Opera */

}

#div2{margin-left: 50px;}

#div2 div{

height: 100px;

width: 100px;

background: #63F7ED;

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

-ms-transform:rotate(45deg); /* IE 9 */

-moz-transform:rotate(45deg); /* Firefox */

（编辑：PHP编程网 - 黄冈站长网）

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

1/15

尾页

如何用光盘重装系统	u盘怎么安装win10
win98系统安装教学	咋用WIN7光盘安装系统