CSS3-2D变换与3D变换、过渡与动画一文全搞定

1,890 阅读8分钟

引言

感觉这四大部分的内容需要一起研究,才算是把三维立体空间的各种动态效果的最基础的知识点给吃透,我也一直想找到一个关于这部分比较全面系统且有案例来验证其中知识点的教程,也搜过不少次,可是都没有找到,只能各个地方查找,然后拼凑到一起,而且又不显得太过学术,要用通俗的手册式教程,来介绍给大家,所以就做了这个算是自己整理笔记的教程。

完整视频教程:

哔哩哔哩:CSS3专题01-2D变换+3D变换+过渡+动画-全解析

2D变换

位移:translate translateX translateY

  • 一个参数:translate(x),代表沿x轴位移x像素,y轴默认为0
  • 两个参数:translate(x, y),代表沿x轴和y轴位移的距离
  • xy单位为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) ,分别代表xy轴方向缩放相应的倍数
  • 参数为数字,无单位
  • 默认值为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
  • 也可以使用pxem百分比值(一般用不到)
  • 设置的偏移值都是从元素左上角开始的

变换的特点

  • 变换之后的元素不会脱离文档流
  • 可以移出屏幕边缘或遮挡住旁边其他元素
  • 行内元素需要改变元素的displayblockinline-block,或者改变其父元素的displayflexgrid后,才能使用变换
  • 可以使用多重变换,用空格隔开,变换的每个值从右向左依次执行,通常将平移放到首位,最后执行

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%
      • 设置的偏移值都是从元素左上角开始的

位移: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):沿着xyz三个方向矢量值确定的坐标点旋转angle角度(比较少用)
  • xyz为三个方向的矢量值,无单位
  • 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),分别代表xy轴和z轴方向缩放相应的倍数
  • 参数为数字,无单位
  • scaleZ(z)是难点,指的z轴方向上的纵深,并不会在z轴方向加厚元素,需要在父元素设置,然后观察子元素位移距离的增加

过渡:transition

  • 概念:指元素从一种属性的取值逐渐变化为另一种同样属性的取值
  • 由于需要慢慢改变取值,所以需要是可以量化的属性值才有过渡的效果
  • 默认对所有属性设置过渡效果,持续时间为0
  • 最简单的设置过渡效果的写法:transition: 1s;

使用过渡的属性名称:transition-property

  • 定义应用过渡效果的属性名称列表。
  • 取值:
    • 单个或多个属性名称,多个属性用逗号隔开
    • none:没有属性获得过渡效果。
    • all:所有属性都将获得过渡效果。
      • 不推荐设置为all,太耗性能,会遍历所有该元素的属性

过渡效果花费的时间:transition-duration

  • 默认为0,没有过渡效果
  • 单位为sms

过渡效果执行的时间曲线函数:transition-timing-function

  • 默认为ease
  • ease:开始慢,中间快,结束慢
  • linear:匀速
  • ease-in:开始慢,结束快
  • ease-out:开始快,结束慢
  • ease-in-out:开始慢,中间快,结束慢(和ease稍有区别)
  • cubic-bezier():函数定义了一个贝塞尔曲线(Cubic Bezier)。
    • 贝塞尔曲线曲线由四个点 P0P1P2P3 定义。P0P3 是曲线的起点和终点。P0是(0,0)表示初始时间和初始状态,P3是(1,1)表示最终时间和最终状态。
    • 需要给此函数传递P1P2代表两个坐标点:cubic-bezier(x1,y1,x2,y2)
    • x1x2 的取值范围01 之间的数字。

过渡延时执行时间:transition-delay

  • 默认为0,不延时
  • 单位为sms

简写中各项的顺序

  • 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)