2D位移
2D位移可以改变元素位置,
给元素添加transform转换属性
transform的具体值如下:translateX设置水平方向位移,若指定的是百分比,则参考自身宽度
translateY设置垂直方向位移,若指定的是百分比,则参考自身高度
translate一个值代表水平,一个垂直
注意:
位移对行内元素无效
位移配合定位,可实现元素水平垂直居中
.box{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%);
}
2D缩放,让元素放大或者缩小
给元素添加transform转换属性
transform的具体值如下:
scaleX 设置水平方向的缩放比例,值为一个数字,1表示不缩放,大于1表示放大,小于1表示缩小
scaleY 设置垂直方向的缩放比例,值为一个数字,1表示不缩放,大于1表示放大,小于1表示缩小
scale 同时设置水平,垂直方向,一个值代表水平和垂直方向,两个值一个代表水平,一个代表垂直
2D旋转
transform转换属性
rotate 设置旋转角度,指定一个(deg),正值顺时针,负值逆时针
2D扭曲 元素在二维平面内被拉扯,产生变形
给元素添加transform属性
skewX 设置水平方向上扭曲,值为角度值,将元素的左上角和右下角拉扯
skewY 设置垂直方向上扭曲,值为角度值,将元素的左上角和右下角拉扯
skew 一个值时代表skewX,两个值代表skewX,skewY
多重变换
transform:translate(-50%,-50%) rotate(45deg)
多重变换时建议后旋转
2D变换-变换原点
元素变换时默认原点是元素的中心,使用transform-origin可以设置变换的原点
修改变换原点对位移没有影响,对旋转和缩放会产生影响
如果提供两个值,第一个是横坐标,第二个是纵坐标
如果只提供一个值,若是像素值,表示横坐标,纵坐标取50%;若是关键词,另一个取50%
transform-origin:50% 50%, 变换原点在元素的中心位置,百分比相对于自身----默认值
transform-origin:left top,原点在左上角
transform-origin:50px 50px,变换原点在左上角50px 50px像素位置
transform-origin:0,只写一个值时,第二个值默认为50%
3D变换
给子元素设置transform属性
重要原则:元素进行3D变换的首要操作,父元素必须开启3D空间
使用transform-style开启3D空间,可选值如下:
flat:让子元素位于此元素的二维平面内(2D空间)---默认值
preserve-3d:让子元素位于此三维空间内(3D空间)
设置景深
产生透视效果,看起来更加立体
使用perspective设置景深,可选这如下
none:不指定透视
长度值:指定观察者z=平面的距离,不允许负值
perspective设置发生3D变换元素的父元素
透视点设置
所谓透视点位置,就是观察者位置;默认透视点在元素的中心
使用perspective-origin设置观察者位置
例子
perspective-origin:400px 300px
相对坐标轴向右偏移400px,向下偏移300px
通常情况下不调整透视点位置
3D位移
就是在2D位移的基础上,可以让元素沿z轴位移,具体使用方式如下:
先给元素添加转换属性transform
编写transform的具体值,3D相关可选值如下:
translateZ 设置z轴位移,需要指定长度值,正值向屏幕外,负值向屏幕里,且不能写百分比
translate3d 第1个参数是对应x轴,第2个参数是对应y轴,第3个参数是对应z轴,且均不能省略
3D旋转
就是在2D旋转的基础上,可以让元素沿x轴和y轴旋转,具体使用如下
先给元素添加转换属性transform
编写transform的具体值,3D相关可选值如下
rotateX 设置x轴旋转角度,需指定一个角度值(deg)面对x轴正方向:正值顺时针,负值逆时针
rotateY 设置Y轴旋转角度,需指定一个角度值(deg)面对y轴正方向:正值顺时针,负值逆时针
rotate3d 前三个参数分别表示坐标轴x,y,z,第四个值表示旋转角度,参数不允许省略。
例如:transform:rotate3d(1,1,1,30deg),意思是xyz分别旋转30度
过渡
过渡可以在不适用flash动画,不使用JavaScript的情况下,让元素从一种样式,平滑过渡到另一种样式
1、transition-property
作用:定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会有过渡效果
常用值:
none:不过渡任何属性
all:过渡所有能过渡的属性
2、transition-duration
作用:设置过渡的持续时间,即:一个状态过渡到另一个状态耗时多久
常用值:
0:没有任何过渡时间-----默认值
s或ms:秒或毫秒
3、transition-delay
作用:指定开始过渡的延迟时间,单位s或ms
4、transition-timing-function
作用:设置过渡类型
常用值:
ease:平滑过渡----默认值
linear:线性过渡
ease-in;慢->快
ease-out:快->慢
ease-in-out:慢->快->慢
step-start:等同于steps(1,start)无视延迟时间,直接过渡
step-end:等同于steps(1,end)最后直接过渡
steps(integer,?)接受两个参数的步进函数,分步过渡,第二个值可以取start或end
cubic-bezie(num,num,num,num)特定的贝塞尔曲线类型
5、transition复合属性
如果设置了一个时间,表示duration;如果设置了两个时间,第一个是duration,第二个是delay;其他值没有顺序
transition:1s 1s linear all;
动画的基本使用
第一步定义关键帧
1、简单方式定义:
写法一:
@keyframs 动画名{
from{
/*property1:value1*/
/*property2:value2*/
}
to{
/*property1:value1*/
}
}
2、完整方式定义:
@keyframs 动画名{
0%{
/*property1:value1*/
}
60%{
/*property1:value1*/
}
100%{
/*property1:value1*/
}
}
第二步:给元素应用动画,用到的属性如下:
1、animation-name:给元素具体的动画名
2、animation-duration:设置动画所需时间
3、animation-delay:设置动画延迟时间
animation-timing-function,设置动画类型,常用值如下:
ease:平滑动画---默认值
linear:线性过渡
ease-in:慢->快
ease-out:快->慢
ease-in-out:慢->快->慢
step-start: 等同于steps(1,start)
step-end:等同于steps(1,end)
steps(integer,?)接受两个参数的步进函数,分步过渡,第二个值可以取start或end
cubic-bezie(num,num,num,num)特定的贝塞尔曲线类型
animation-iteration-count,指定动画的播放次数,常用值如下:
number:动画循环次数
infinite:无限循环
animation-direction,指定动画方向,常用值如下:
normal:正常方向(默认)
reverse:反方向运行
alternate:动画正常运行再反方向运行,并持续交替运行
alternate-reverse:动画反运行再正方向运行,并持续交替运行
animation-fill-mode,设置动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
animation-play-state,设置动画的播放状态,常用值如下:
running:运动(默认)
paused:暂停