1、变换transform
能够对元素进行旋转(rotate)、缩放(scale)、倾斜(skew)、移动(translate)四种类型处理。
属性:
transform 向元素应用2D或3D变换
transform-origin 改变被变换元素的原点位置
transform-style 被嵌套元素如何在3D空间中显示
perspective 3D元素的透视效果
perspective-origin 3D元素的底部位置
backface-visibility 元素在不面对屏幕时是否可见
transform坐标系统:
如果没有使用transform改变元素原点位置,css3旋转、缩放、倾斜、移动都是以元素中心位置进行的。
transform
语法:transform:none|transform-functions;
2D变换方法:
matrix(n,n,n,n,n,n) 以一个含六个值的变换矩阵形式指定2D变换
translate(x,y) 2D移动,第一个参数对应x轴,第二个参数对应y轴。如果第二个值未设置,默认0
translateX(n) 元素x轴移动
translateY(n) 元素y轴移动
rotate(angle) 2D旋转,需要先设置transform-origin属性
scale(x,y) 2D缩放,如果第二个值未设置,默认取第一个参数的值
scaleX(n) 元素x轴的(水平方向)缩放
scaleY(n) 元素y轴的缩放
skew(x-deg,y-deg) 2D倾斜,如果第二个值未设置,默认0
skewX(angle) 元素x轴的倾斜
skewY(angle) 元素y轴的倾斜
3D变换方法:
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 以一个4*4矩阵的形式指定一个3D变换
translate3d(x,y,z) 3D移动,参数不允许省略
translateX(n)/translateY(n)/translateZ(n) 元素在x/y/z轴上移动
scale3d(x,y,z) 3D缩放。参数不允许省略
scalaeX(n)/scaleY(n)/scaleZ(n) 元素在x/y/z轴上缩放
rotate(x,y,z,deg) 3D旋转,前三个参数分别表示旋转方向,第四个参数表示旋转角度,参数不允许省略
perspective(n) 透视距离
transform-origin属性:
设置元素以某个原点进行转换,属性值可以使用关键字、长度和百分比。
x-axis 定义视图被置于x轴的何处left、center、right | length | %
y-axis 定义视图被置于y轴的何处left、center、right | length | %
z-axis 定义视图被置于z轴的何处length
transform-style属性:
指定某元素的子元素是位于三维空间内,还是在该元素所在的平面内被扁平化。
语法:transform-style:flat(默认) | preserve-3d
属性值为preserve-3d时,元素将会创建局部堆叠上下文,保证变换元素处于三维空间内,需要在变换元素的父元素上定义transform-style属性。所有的子元素都处于同一个三维空间内。
2、过渡
css3过渡是元素从一种样式逐渐改变为另一种样式时的效果。
属性:
transition 在一个属性中设置四个过渡属性
transition-property 规定应用过渡的css属性名称
transition-duration 规定过渡效果持续时间,默认0
transition-timing-function 规定过渡效果时间曲线,默认case
transition-delay 规定过渡效果何时开始,默认0
transition-property属性
none(没有属性会获得过渡效果)all(所有属性都将获得过渡效果)ident(指定要进行过渡的css属性列表,列表以逗号分隔)
transition-duration属性
变换持续的时间,规定完成过渡效果需要花费的时间(秒或毫秒),默认0。
transition-timing-function属性
- ease 默认值,逐渐变慢,ease函数等同于贝塞尔曲线(0.25,0,.1,0.25,1.0)
- linear 匀速,(0.0,0.0,1.0,1.0)
- ease-in 加速(0.42,.0,1.0,1.0)
- ease-out 减速(0,0,0.58,1.0)
- ease-in-out 加速然后减速(0.42,0,0.58,1.0)
- cubic-bezier 允许自定义一个时间曲线,(x1,y1,x2,y2)四个值特定于曲线上点P1和P2。所有值需要在[0,1]区域内,否则无效。
transition-delay属性
用来指定一个动画开始执行的时间,就是说改变元素属性值后多少秒或者毫秒。
3、动画
属性:
@keyframes 创建动画
animation 除animation-play-state属性之外的所有动画属性的简写属性
animation-name 规定@keyframes动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认0
animation-timing-function 规定动画的速度曲线,默认ease
animation-delay 规定动画何时开始,默认0
animation-iteration-count 规定动画被播放的次数,默认1
animation-direction 规定动画是否在下一个周期逆向地播放,默认normal
animation-play-state 规定动画是否正在运行或暂停,默认running
animation-fill-mode 规定对象动画时间之外的状态
@keyframes规则
语法:@keyframes animationname {keyframes-selector{css-styles;}}
animationname 必需,定义动画的名称
keyframes-selector 必需,关键帧。合法值:0~100%、form(与0%相同)、to(与100%相同)
css-styles 必需。关键帧时一个或多个合法的css样式属性
animation-delay属性
定义动画何时开始,秒或者毫秒
animation-iteration-count属性
定义动画的播放次数 ,默认值1,关键字infinite规定动画无限次播放
animation-direction属性
定义是否可以轮流反向播放动画,默认值normal,动画正常播放。alternate奇数次正常播放,偶数次反向播放