css3动画实例测试

标签：

1.css3动画属性分析(2016-5-11)

1.transition: 规定属性变换规则，可以这样讲。transition(a,b,c,d);

a:要变换的属性；

b:过渡时间；

c:运动方式；

d：需要延迟多久开始执行该动画

ex：<div class="exdiv">测试div</div>

.exdiv{width:200px;height:100px; transition:width 2s ease-in 2s}

div:hover{width:500px};

该实例说明党鼠标移入div时，延迟2s后该div宽度会2s内变为500px;

2.transform:我们能够对元素进行移动、缩放、转动、拉长或拉伸。

改属性2d变换有以下属性

• translate()
• rotate()
• scale()
• skew()
• matrix()

translate(x,y):对元素进行位移；

ex：<div class="exdiv">测试div</div>

.exdiv{transform:translate(50px,100px)}表示div从当前位置left移动50px,top移动100px;

rotate(x)：对元素进行角度旋转

.exdiv{transform:rotate(50deg)}标书div顺时针旋转50个角度

scale(x,y)：对元素进行角度旋转

.exdiv{transform:scale(2,4)}表示div宽度增加到原始尺寸的2倍，高度增加到原始尺寸的4倍

skew(x,y) 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

.exdiv{ transform:skew(30deg,20deg)} 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

css3动画实例测试

标签：

原文地址：http://www.cnblogs.com/cainiaoz/p/5481726.html