# CSS 变形

作者：陈广录 时间：2020-01-14

# 1 介绍

css3 中制作动画的几个属性 s：css3 中的变形（transform）、过渡（transition）、动画（animation）。

# 2 CSS3 变形（transform)

变形功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。

语法：

transform ： none | <transform-function> [ <transform-function> ]*
也就是：
transform: rotate | scale | skew | translate |matrix;
1
2
3

坐标系：

在 CSS 中，笛卡尔坐标系使用三个轴表示，x 轴的正值在右侧，负值在左侧。y 轴的正值沿纵轴向下，负值沿纵轴向上。 z 轴上的正值离你较近，负值离你较远（与 z-index 相似）

基本属性：

# 2.1 transform-origin：

用于指定元素变形的中心点。默认中心点就是元素的正中心，即 XYZ 轴的 50% 50% 0 处。

通过该属性改变元素在 XYZ 轴的中心点，正值表示正向位移，负值表示负向位移

# 2.2 transform-style：

这个属性只有两个值 flat 和 preserve-3d。用于指定舞台为 2D 或 3D，默认值 flat 表示 2D

注：在变形元素自身上指定该属性是没有用的，要在变形元素的父元素上设置该属性。

# 2.3 旋转 rotate（）

rotate(<angle>) :通过指定的角度参数对元素指定一个 2D rotation(2D 旋转)，需先有 transform-origin 属性的定义（默认旋转中点是中心点）。 transform-origin 定义的是旋转的基点，其中 angle 是指选择角度，正顺时针旋转，负逆时针旋转。（关于变形基点已在前几篇中讲解过，https://segmentfault.com/a/11...）

# 2.4 移动 translate（X,Y）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

# 2.5 缩放 scale（X,Y）

scale(<number>[, <number>])：提供执行[sx,sy]缩放矢量的两个参数指定一个 2D scale（2D 缩放）。如果第二个参数未提供，则取与第一个参数一样的值。而 Y 是一个可选参数，如果没有设置 Y 值，则表示 X，Y 两个方向的缩放倍数是一样的,并以 X 为准。如：transform:scale(2,1.5);

# 2.6 斜切 skew()

skew(<angle> [, <angle>]) ：X 轴 Y 轴上的 skew transformation（斜切变换）。第一个参数对应 X 轴，第二个参数对应 Y 轴。如果第二个参数未提供，则值为 0，也就是 Y 轴方向上无斜切。skew 是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么 Y 轴为 0deg。同样是以元素中心为基点，我们也可以通过 transform-origin 来改变元素的基点位置。 transform:skew(30deg,10deg);

方法：X 轴：正数为左，负数为右； Y 轴：正数为下，负数为上

# 2.7 矩阵 matrix()

对二维向量进行转换

其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知，Matrix 中 e, f 主要用于设置元素在 X 轴和 Y 轴上的平移。a, d 主要用于设置元素在 X 轴和 Y 轴上的缩放。a,b,c,d 用于设置元素在 XY 平面上的旋转。rotate/translate/screw 等都可以直接通过设置 Matrix 来达到同样的效果。

# 3 CSS 3D 变形

元素的平移、旋转、缩放和倾斜等功能。这些效果只是单纯在二维平面图上的，我们称之为 2D。在 2D 平面基础上多出一个 z 轴，称之为三维立体。

# 3.1 透视 perspective()

  • 透视原理：视点距离屏幕的长短。值越小表示用户眼睛距离屏幕越近，相当于创建一个较大的 3D 舞台。反之，值越大表示用户眼睛距离屏幕越远。（近大远小）
  • 默认值是 none 表示无 3D 效果，只能设 px 值，不能设%百分比
  • perspective 一般作为一个属性，设置给父元素，作用于所有 3D 转换的子元素

# 3.2 backface-visibility：

用于是否可以看见 3D 舞台背面，默认值 visible 表示背面可见，可以设成 hidden 让背面不可见。通常当旋转时，如果不希望背面显示出来，该属性就很有用，设成 hidden 即可

# 3.3 translate3d:

translate3d 位移系列中用于 3D 的有：translate3d，translateZ

translate3d(tx,ty,tz)，其中 tz 的 Z 轴长度只能为 px 值，不能为%百分比

# 3.4 rotate3d

rotate3d 中的 3D 旋转主要包括 rotateX()、rotateY()、rotateZ()和 rotate3d(x,y,z,a)四个功能函数；

# 3.5 scale3d：

scale3d 缩放系列中用于 3D 的有：scale3d(x,y,z)，scaleZ；仅当元素有深度时，这两个函数才有效果，而元素在默认情况下没有深度。如果让元素有一定的深度，例如绕 x 轴或 y 轴旋转，那么深度就可以缩放。使用 scalez()或者 scale3d()都可以

# 4 CSS3 过渡（transition）

属性详解 transition-property 不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。 transition-duration 指定从一个属性到另一个属性过渡所要花费的时间。默认值为 0，为 0 时，表示变化是瞬时的，看不到过渡效果。 transiton-timing-function 过渡函数，有如下几种：

  • liner ：匀速
  • ease-in：加速
  • ease-out：减速
  • ease-in-out：先加速再减速
  • cubic-bezier：三次贝塞尔曲线，可以定制

触发过渡 单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： :hoever :focus :checked 媒体查询触发 JavaScript 触发 局限性 transition 的优点在于简单易用，但是它有几个很大的局限。

  • （1）transition 需要事件触发，所以没法在网页加载时自动发生。
  • （2）transition 是一次性的，不能重复发生，除非一再触发。
  • （3）transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  • （4）一条 transition 规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation 就是为了解决这些问题而提出的。

# 5 CSS3 animation(动画)

CSS3 的 animation 属性可以像 Flash 制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。animation 实现动画效果主要由两部分组成： 1）通过类似 Flash 动画中的帧来声明一个动画； 2）在 animation 属性中调用关键帧声明的动画。** 注：animation 属性到目前位置得到了大多数浏览器的支持，但是，需要添加浏览器前缀哦！ **animation 动画属性** 还是先列表格来说明属性，自己感觉会比较清晰：

  • （1）animation-name：none 为默认值，将没有任何动画效果，其可以用来覆盖任何动画

  • （2）animation-duration：默认值为 0，意味着动画周期为 0，也就是没有任何动画效果

  • （3）animation-timing-function：与 transition-timing-function 一样

  • （4）animation-delay：在开始执行动画时需要等待的时间

  • （5）animation-iteration-count：定义动画的播放次数，默认为 1，如果为 infinite，则无限次循环播放

  • （6）animation-direction：默认为 nomal，每次循环都是向前播放，（0-100），另一个值为 alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放

  • （7）animation-state：默认为 running，播放，paused，暂停

  • （8）animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为 none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用 forwards 和 backwards 规则。

    @keyframes CSS3 的 animation 制作动画效果主要包括两部分：

      1. 用关键帧声明一个动画，
    • 2.在 animation 调用关键帧声明的的动画。 @keyframes 就是关键帧。这个帧与 Flash 里的帧类似，一个动画中可以有很多个帧。 一个@keyframes 中的样式规则是由多个百分比构成的，可以在这个规则上创建多个百分比，从而达到一种不断变化的效果。另外，@keyframes 必须要加 webkit 前缀。举个例子：
div:hover {
  -webkit-animation: 1s changeColor;
  animation: 1s changeColor;
}
@-webkit-keyframes changeColor {
  0% {
    background: #c00;
  }
  50% {
    background: orange;
  }
  100% {
    background: yellowgreen;
  }
}
@keyframes changeColor {
  0% {
    background: #c00;
  }
  50% {
    background: orange;
  }
  100% {
    background: yellowgreen;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上面代码中的 0% 100%的百分号都不能省略，0%可以由 from 代替，100%可以由 to 代替。要让 changeColor 动画有效果，就必须要通过 CSS3animation 属性来调用它。

区别

animation 属性类似于 transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition 需要触发一个事件才会随着时间改变其 CSS 属性；animation 在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素 CSS 属性，达到一种动画的效果

编辑此页面

数据中心 研发二部