2D变换
位移:translate translateX translateY
- 一个参数:translate(x),代表沿x轴位移x像素,y轴默认为0
- 两个参数:translate(x, y),代表沿x轴和y轴位移的距离
- x、y单位为px
- x值:为正则沿着x轴向右位移,为负则沿着x轴向左位移
- y值:为正则沿着y轴向下位移,为负则沿着y轴向上位移
- 如果是通过active进行位移,执行完毕后会还原
- 单独写法:translateX(x) translateY(y)
- 位移的参考原点为元素左上角
旋转:rotate
- rotate(angle):参数只有一个
- 参数为旋转的角度,单位为deg
- 2d空间只能围绕元素中心的z轴旋转
- 参数为正值则顺时针旋转,为负值则逆时针旋转
- 默认为围绕元素中心为原点进行旋转
缩放:scale
- 一个参数:scale(num),代表同时在x轴和y轴两个方向缩放相同的倍数
- 两个参数:scale(x, y) ,分别代表x和y轴方向缩放相应的倍数
- 参数为数字,无单位
- 默认值为1倍,就是不缩放
- 默认为围绕元素中心为原点进行缩放
变形:skew skewX skewY
- 一个参数:skew(x),代表沿x轴变形x角度,y轴默认为0
- 两个参数:skew(x, y),代表沿x轴变形x的角度,沿y轴变形y的角度
- 参数为变形的角度,单位为deg
- x值:为正则向左变形,为负则向右变形
- y值:为正则向上变形,为负则向下变形
- 单独写法:skewX(x) skewY(y)
- 默认为围绕元素中心为原点进行变形
变换的原点
- 原点就是元素的中心,可以通过transform-origin属性改变原点位置
- 默认值为transform-origin: center center;
- 除了位移(因为位移元素直接移跑了),别的变换(旋转、缩放、变形)都是围绕原点变换的
- 原点关键字:top bottom center left right
- 只设置一个的话,另一个为默认值center
- 也可以使用px、em、百分比值(一般用不到)
- 设置的偏移值都是从元素左上角开始的
变换的特点
- 变换之后的元素不会脱离文档流
- 可以移出屏幕边缘或遮挡住旁边其他元素
- 行内元素需要改变元素的display为block或inline-block,或者改变其父元素的display为flex或grid后,才能使用变换
- 可以使用多重变换,用空格隔开,变换的每个值从右向左依次执行,通常将平移放到首位,最后执行
3D变换
父元素样式
- 3D变换需要父元素设置样式才能保留3d的变化效果
- 保留3D变换:transform-style: preserve-3d,默认值为flat表示不保留3D变换
- 设置视角深度:perspective: 1000px
- 观察点位置:perspective-origin
- 默认值为:perspective-origin: center center;
- 第一个代表x轴上的位置,第二个值代表y轴上的位置
- 取值可以为:关键字、长度值,百分比值(相对于当前元素的宽或高),可以为负值
- 可以设置的关键字:top bottom center left right
- 上面关键字的顺序无关,浏览器会自动调整
- top == 0% bottom == 100% center == 50% left == 0% right == 100%
- 设置的偏移值都是从元素左上角开始的
- 观察点位置:perspective-origin
位移:translate3d translateX translateY translateZ
- translate3d(x, y, z):必须传递三个参数
- translateX(x) translateY(y) translateZ(z)
- 参数单位为px
- x值:为正则沿着x轴向右位移,为负则沿着x轴向右位移
- y值:为正则沿着y轴向下位移,为负则沿着y轴向上位移
- z值:为正则沿着z轴向屏幕外位移,为负则沿着z轴向屏幕内位移
旋转:rotate3d rotateX rotateY rotateZ
- rotate3d(x, y, z, angle):沿着x,y,z三个方向矢量值确定的坐标点旋转angle角度(比较少用)
x,y,z为三个方向的矢量值,无单位 - rotateX(angle) rotateY(angle) rotateZ(angle) 沿着元素中心点穿过的(X/Y/Z)轴旋angle角度
- 参数angle单位为deg
- angle值:为正则为顺时针旋转,为负则为逆时针旋转
- 可以通过transform-origin: left来设置比如绕着元素的左边框旋转
- backface-visibility 属性定义当元素旋转到背面向屏幕时是否可见
- visible 背面可见
- hidden 背面不可见
缩放:scale3d scaleX scaleY scaleZ
- scale3d(num, num, num):必须传递三个参数
- scaleX(x) scaleY(y) scaleZ(z),分别代表x和y轴和z轴方向缩放相应的倍数
- 参数为数字,无单位
- scaleZ(z)是难点,指的z轴方向上的纵深,并不会在z轴方向加厚元素,需要在父元素设置,然后观察子元素位移距离的增加
过渡:transition
- 概念:指元素从一种属性的取值逐渐变化为另一种同样属性的取值
- 由于需要慢慢改变取值,所以需要是可以量化的属性值才有过渡的效果
- 默认对所有属性设置过渡效果,持续时间为0
- 最简单的设置过渡效果的写法:transition: 1s;
使用过渡的属性名称:transition-property
- 定义应用过渡效果的属性名称列表。
- 取值:
- 单个或多个属性名称,多个属性用逗号隔开
- none:没有属性获得过渡效果。
- all:所有属性都将获得过渡效果。
- 不推荐设置为all,太耗性能,会遍历所有该元素的属性
过渡效果花费的时间:transition-duration
- 默认为0,没有过渡效果
- 单位为s或ms
过渡效果执行的时间曲线函数:transition-timing-function
- 默认为ease
- ease:开始慢,中间快,结束慢
- linear:匀速
- ease-in:开始慢,结束快
- ease-out:开始快,结束慢
- ease-in-out:开始慢,中间快,结束慢(和ease稍有区别)
- cubic-bezier():函数定义了一个贝塞尔曲线(Cubic Bezier)。
- 贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0) 表示初始时间和初始状态,P3是(1,1)表示最终时间和最终状态。
- 需要给此函数传递P1,P2代表两个坐标点:cubic-bezier(x1,y1,x2,y2)
- x1 和 x2 的取值范围0 到 1 之间的数字。
过渡延时执行时间:transition-delay
- 默认为0,不延时
- 单位为s或ms
简写中各项的顺序
- transition(transition-property transition-duration transition-timing-function transition-delay)
- 默认值: transition: all 0 ease 0;
动画:animation
- 对比过渡,过渡只有开始帧和结束帧,中间动画由浏览器完成
- 而动画可以设置多个关键帧,更加精确的控制元素样式的变化过程
创建动画:@keyframes规则
- 定义动画的名称:animation-name (必需),和下面使用动画时候的动画名称对应
- 动画持续时间的百分比:keyframes-selector (必需)
- 0%-100%
- from (和0%相同)
- to (和100%相同)
- 一个或多个合法的CSS声明语句:css-styles (必需)
使用时候的动画名称:animation-name
- keyframename:指定关键帧动画的名称
- none:没有动画
动画周期所用时间:animation-duration
- 默认为0
动画效果执行的时间曲线函数:animation-timing-function
- 见上面过渡transition-timing-function属性。
元素初始状态与动画开始和结束状态的模式:animation-fill-mode
- 因为需要将元素的初始状态和动画的0%帧的元素样式分开,所以只有延时情况下才能看出这个属性值的作用
- 默认为none: 保留初始状态,不保留100%帧状态
- forwards: 保留初始状态,保留100%帧状态
- backwards: 不保留初始状态(会立即变为0%帧的样式),不会保留100%帧状态
- both: 不保留初始状态,会保留100%帧状态
动画延时执行时间:animation-delay
- 默认为0
动画播放次数:animation-iteration-count
- 默认为1
动画在下一个周期动画播放方向:animation-direction
- normal:普通,默认值。按正常播放动画
- reverse:反转,反向播放动画
- alternate:轮询,在奇数次正向播放动画,偶数次反向播放动画
- alternate-reverse:反转轮询,在奇数次反向播放动画,偶数次正向播放动画
动画是否正在运行或暂停:animation-play-state
- 默认为running
- running:默认值,运行动画
- paused:暂停动画
简写中各项的顺序
- animation(animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state)