CSS3 2D层面的变换--------------功能:元素的移动、缩放、转动、拉长或拉伸。
transform
translate() 方法
元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)
rotate() 方法
元素顺时针旋转给定的角度单位deg。允许负值,元素将逆时针旋转。
scale() 方法
元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)
skew() 方法
参数表示倾斜角度,单位deg
transform-origin
设置基点位置(x,y),可能的值
· top
· center
· bottom
· length
· %
CSS3 transition动画
transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
· 规定您希望把效果添加到哪个 CSS 属性上
· 规定效果的时长
语法:
transition:property(变换属性) duration(延续时间) timing-function(速率)delay(延迟时间)
1).property:执行变换属性:当指定的css属性改变时,过渡效果将开始。
值有三种可能:
A:none 没有属性会获得过渡效果
B:all 所有属性都将获得过渡效果
C:css属性名称列表,列表以逗号分隔。!!
2).duration:变换持续的时间
规定完成过渡所需的时间(以秒或毫秒计算),默认值0没有效果。
3).timing-function在延续时间段,变换的速率
可能的值:
ease(逐渐变慢)
linear(匀速)
ease-in(加速)
ease-out(减速)
ease-in-out(加速然后减速)
cubic-bezier(n,n,n,n)在bezier函数中定义自己的值,n取值0-1
4)变换的延迟时间
动画开始的时间,单位秒或毫秒