11.6 CSS 变换（transform）

我们已经熟悉如何用CSS控制字体、位置、间距等“几何”属性，而前面的章节我们了解到还可以使用CSS转换（transition）或动画（animation）来简单的改变这些“几何”属性。

CSS变换（transforms）就是一系列用来增强控制元素“几何”属性的方法，通过CSS transforms，元素将具备强大的几何变换（甚至3D变换）功能：

• translate: 位移方法，包含3D版本，支持在3个坐标轴方向移动元素位置（x,y,z）
• rotate: 旋转方法，使元素沿中心点旋转特定角度
• scale: 伸缩方法，使元素放大或缩小
• skew: 扭曲方法，使元素产生扭曲变形

transform 属性

有3个CSS transform 属性可用：

• transform 定义使用哪个transform 方法（translate, rotate, scale…）
• transform-origin 定义变换的原点（origin point），默认值为元素边框的中心点位置（以百分比定义：50% 50%），类似于前述的背景位置。
• transform-style 变换样式，取值为flat（平面）或preserve-3d（立体）。默认为flat。

和 background 、 border 不同，transform 并不是一个速写属性。

不破坏文档流

为了避免意外行为，元素变换不该影响正常文档流，不管是旋转、缩放还是位移，都不会影响到其他元素。下面对这些变换方法逐一讲解。

位移（translate）

translate() 方法对应于平面几何（二维坐标系）的位移函数。 允许在x,y方向上移动元素。该方法的参数可以是：

• 1个参数: 只在x坐标轴方向移动
• 2个参数: 第一个参数代表x坐标轴位移，第二个参数代表y坐标轴位移。

位移功能的效果跟相对定位中通过 left 和 top 来移动元素位置类似。

在前面的例子环游动画中，我们通过在@keyframe中改变left和top属性来移动元素，我们同样可以通过位移方法来达到同样的效果：

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 240px);}
  75% { transform: translate(0, 240px);}
  100%{ transform: translate(0, 0);}
}
p{ animation: translating 4s linear infinite;}

Hello

#translate-animation{ height: 300px; padding: 0; width: 300px;} #translate-animation p{ animation: translating 4s linear 0s infinite; background: turquoise; color: white; height: 60px; line-height: 60px; margin: 0; position: absolute; text-align: center; width: 60px;} @keyframes translating { 0% { transform: translate(0, 0);} 25% { transform: translate(240px, 0);} 50% { transform: translate(240px, 240px);} 75% { transform: translate(0, 240px);} 100%{ transform: translate(0, 0);} }

transform和left一样是一个 CSS 属性（property），只不过这个属性的值（value）有点特殊，是一个函数translate() 。

使用translate()方法在动画语义上要比相对定义要明确。我们还可以使用 translateX() 和 translateY() 来分别在x或y轴方向上平移。

旋转（rotate）

rotate() 函数允许元素绕着一个固定点（缺省情况下是该元素的中心点）进行旋转。好比转盘上的唱片。

rotate() 只有一个参数，单位可以是角度 （deg）、弧度 （grad） 或 转数（turn） (1 turn = 360°）。

@keyframes rotating {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
p{ animation: rotating 4s linear infinite;}

我的唱片

#rotate-animation{ padding: 2rem;} #rotate-animation p{ animation: rotating 4s linear 0s infinite; background: slateblue; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin: 0; text-align: center; width: 120px;} @keyframes rotating { 0% { transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }

伸缩（scale）

scale() 函数允许调整元素的大小。该方法的参数可以是：

• 1个参数: 按元素宽高的固定比例来调整大小
• 2个参数: 第一个参数调整水平方向的大小，第二个为垂直方向。

可能的取值有：

• 1: 保持原有大小
• 2: 放大到2倍
• 0.5: 缩小到1/2
• 0: 零宽高，元素将不可见
• -1: 将呈现元素的镜像

@keyframes scaling {
  0%  { transform: scale(1);}
  20%{ transform: scale(2);}
  40%{ transform: scale(0.5);}
  60%{ transform: scale(0);}
  80%{ transform: scale(-1);}
  100%{ transform: scale(1);}
}
p{ animation: scaling 10s steps(1) 0s infinite;}

scale(1): 原始大小

scale(2): 2倍

scale(0.5): 1/2

scale(0): 零宽高（不可见）

scale(-1): 显示镜像

Scaling #scale-animation{ padding: 2rem;} #scale-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;} #scale-animation p:first-child{ left: 0; position: relative; top: 0;} #scale-animation p:nth-child(2){ animation-delay: 2s;} #scale-animation p:nth-child(3){ animation-delay: 4s;} #scale-animation p:nth-child(4){ animation-delay: 6s;} #scale-animation p:nth-child(5){ animation-delay: 8s;} #scale-animation p strong{ content: ""; display: inline-block;} #scale-animation div{ animation: scaling 10s linear 0s infinite; background: slateblue; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;} @keyframes scaling { 0% { transform: scale(1);} 19% { transform: scale(1);} 20% { transform: scale(2);} 39% { transform: scale(2);} 40% { transform: scale(0.5);} 59% { transform: scale(0.5);} 60% { transform: scale(0);} 79% { transform: scale(0);} 80% { transform: scale(-1);} 99% { transform: scale(-1);} 100%{ transform: scale(1);} } @keyframes scaling-toggle { 0% { opacity: 1;} 20% { opacity: 0;} 100%{ opacity: 0;} }

和 translate() 一样，scale() 方法也有后缀x和y版本：scaleX()、 scaleY()，分别调整水平和垂直方向的大小。

扭曲（skew）

skew() 函数允许扭曲一个元素，基本上是通过沿着一条轴线拉伸元素边缘来使其变形。

这个方法在几何变换上是有意义的，但是其实际视觉效果难以预料。

skew() 方法的参数可以是：

• 1个参数: 元素沿水平方向扭曲
• 2个参数: 第一个参数为水平方向的扭曲度，第二个为垂直方向。

扭曲的单位只可以是角度（angle），即deg。

@keyframes skewing {
  0%  { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  100%{ transform: skew(0deg);}
}
p{ animation: skewing 10s steps(1) 0s infinite;}

skew(0deg): 没有变形

skew(10deg): 水平方向的轻度扭曲

skew(45deg): 1/4扭曲

skew(90deg): 1/2扭曲，元素的4条边被扭曲到了同一条线上，元素高度变为0，不可见

skew(120deg): 和 -60deg 的扭曲一样

Skewing

我们可以看到扭曲10度，是偏向负x轴。在扭曲过程中原点是固定，里面的文字出现了难看的变形。

#skew-animation{ padding: 2rem;} #skew-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;} #skew-animation p:first-child{ left: 0; position: relative; top: 0;} #skew-animation p:nth-child(2){ animation-delay: 2s;} #skew-animation p:nth-child(3){ animation-delay: 4s;} #skew-animation p:nth-child(4){ animation-delay: 6s;} #skew-animation p:nth-child(5){ animation-delay: 8s;} #skew-animation div{ animation: skewing 10s linear infinite; background: tomato; color: white; height: 60px; line-height: 60px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;} @keyframes skewing { 0% { transform: skew(0deg);} 19% { transform: skew(0deg);} 20% { transform: skew(10deg);} 39% { transform: skew(10deg);} 40% { transform: skew(45deg);} 59% { transform: skew(45deg);} 60% { transform: skew(90deg);} 79% { transform: skew(90deg);} 80% { transform: skew(120deg);} 99% { transform: skew(120deg);} 100%{ transform: skew(180deg);} } @keyframes skewing-toggle { 0% { opacity: 1;} 20% { opacity: 0;} 100%{ opacity: 0;} }

三维变换（3d functions）

上述变换都是基于2D平面的，实际上这些方法都有一个3D版本。

比如，translate() 的3D版本是 translate3d()，除了x,y方向外，还支持z方向上的位移。(因此也有一个对应的 translateZ() 方法）。

z 参数其实就是把元素拉近还是推远，视觉效果上和放大、缩小类似。

@keyframes zooming {
  0%  { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
p{ animation: zooming 5s alternate;}

Original

Transformed

#zoom-animation{ padding: 2rem; perspective: 500px; transform-style:preserve-3d; perspective-origin:80px 80px; } #zoom-animation div, #zoom-animation p{ background: midnightblue; color: white; height: 200px; line-height: 200px; margin: 0; position: relative; text-align: center; width: 200px;} #zoom-animation p{ animation: zooming 5s alternate infinite both; background: limegreen; left: 2rem; opacity: 0.7; position: absolute; top: 2rem;} @keyframes zooming { 0% { transform: translate3d(0, 0, 0);} 100%{ transform: translate3d(0, 0, 200px);} }

绿色的区块将被拉近 200px。看起来像是被放大了一般。

由于3d效果需要有一个虚拟的3d视觉空间，因此要呈现3d效果的元素的包容块（其父元素）中需要设置视角属性 perspective: 500px;，这样才可以激活3d视觉空间。我们也可以使用 transform: perspective(500px);。

父元素中还设置了2个和3d变换有关的参数，分别是transform-style 和 perspective-origin，这两个参数是可选的。当设置了perspective时，transform-style将被设置为preserve-3d。

3D建模的关键因素有3个：视角、空间和物体。其原理可参考阅读如下博文玩转CSS3 3D - 原理篇。

变换原点（transform-origin）

transform-origin是变换原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用。

元素默认变换原点就是其中心位置，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对改变元素变换原点（参照点）位置。

其语法是transform-origin(x,y)，其中X和Y的值可以是百分比,em,px，其中x也可以是字符参数值left,center,right；y和x一样除了百分比外还可以设置字符值top,center,bottom。

这里有一个可视化的在线动画演示来帮助理解transform-origin对transform操作的直观影响（你可以直接拖动盒子两边的黄色箭头）：

网页性能

translate所实现的功能和top/left修改元素位置完全相同，我们推荐使用translate方法而不是修改top/left值。因为使用CSS3 translate变换，将触发创建位于GPU中的独立渲染层，从主页面中脱离出来，不占用CPU，不会导致页面重布局（reflow或称之为relayout）。 这样其渲染性能将得到很大的提升。当然凡事有利有弊，对于大量（成千上万）粒子平移的动画，过度使用translate会导致复合（Composite）各渲染层的时间大为增加，从而得不偿失。更为详细的描述，请阅读这篇博客。