2024年4月29日发(作者：)

CSS3培训：详解transform知识

在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。

但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观

——旋转或缩放？

多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaScript才能完成。

不过，CSS3将要改变设计师这种思维，进入CSS3时代，借助CSS3就可以轻松倾斜、缩

放、移动以及翻转元素。接下来将会分几篇教程，向大家介绍CSS3 Transform相关的知识。

CSS3变形的介绍

2012年9月，W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D

或3D空间，这个草案包括了CSS3 2D变形和CSS3 3D变形。

CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变

形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。这些效

果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则

无需加载这些额外的文件，再一次提升了你的开发效率，还提高了页面的执行效率。

CSS变形允许您动态的控制元素。您可以在屏幕周围移动它们，缩小或扩大，旋转，或结合

所有这些产生复杂的动画效果。通过CSS变形，可以让元素生成静态视觉效果，但也可以

很容易结合CSS3的transition和动画的keyframe产生一些动画效果。在本章中，首先介绍

简单的2D变形，然后向您展示如何扩展转换成3D变形。

CSS3的

transform

属性指一组转换函数。

CSS3的2D

transform

函数包括了

translate()

、

scale()

、

rotate()

和

skew()

。

translate()

函数接受CSS的标准度量单位；

scale()

函数接受一个0和1之间的十进制

值；

rotate()

和

skew()

两个函数都接受一个径向的度量单位值

deg

。除了

rotate()

函数

之外，每个函数都接受X轴和Y轴的参数。

CSS3变形中具有

X /Y

可用的函数：

translateX()

、

translateY()

、

scaleX()

、

scaleY()

、

skewX()

和

skewY()

。

2D变形中还有一个矩阵

matrix()

函数，其包括六个参数。

CSS3 3D变形包括函数有：

rotateX()

、

rotateY()

、

rotate3d()

、

translateZ()

、

translate3d()

、

scaleZ()

和

scale3d()

。

CSS3 3D变形中也包括一个矩阵

matrix3d()

函数，其包括16个参数。

transform-origin

属性指定元素的中心点在哪。后面增加了第三个数

transform-origin-z

，控制元素三维空间中心点。

perspective

属性相对于观众产生一个3D场景，你看3D物体，眼睛到画布的距离。正确

的用法是他需要应用到变形元素的祖先元素上。

perspective-origin

为视点的位置。

backface-visibilty

属性用来设置背面的可见性。

设置

transform-style

的值为

preserve-3d

值，建立一个3D渲染环境。

transform属性

CSS3的变形（transform）属性让元素在一个坐标系统中变形。这个属性包含一系列变形函

数，可以移动、旋转和缩放元素。transform属性的基本语法如下：

transform：none []*

transform

属性可用于内联元素和块元素。其默认值为

none

，表示不元素不进行变形。

transform

另一个属性值是一系列的

。

表示一个或多个变形函数，以空格分开；换句话说就是我们同时对一个元素进行变形的多种

属性操作，例如

rotate

、

scale

、

translate

等。但这里需要提醒大家，以往我们叠加效

果都是用逗号(“，”)隔开，但在

transform

中使用多个

transform-function

时却需要

有空格隔开。

transform属性3D变形（3D transform）模块的一部分，也就是说所有的2D变形函数也包含

于3D变形规范中。如此一来，CSS3变形中的函数根据不同的规范略有不同，下面列出的

是变形中的2D和3D常用变形函数的功能，简单说明如下：

2D transform常用的transform-function的功能:

translate()

：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上

有两个扩展函数：

translateX()

和

translateY()

。

scale()

：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：

scaleX()

和

scaleY()

。

rotate()

：用来旋转元素。

skew()

：用来让元素倾斜。在此基础上有两个扩展函数：

skewX()

和

skewY()

。

matrix()

：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d()

：移元素元素，用来指定一个3D变形移动位移量

translate()

：指定3Ｄ位移在Ｚ轴的位移量。

scale3d()

：用来缩放一个元素。

scaleZ()

:指定Z轴的缩放向量。

rotate3d()

：指定元素具有一个三维旋转的角度。

rotateX()

、

rotateY()

和

rotateZ()

：让元素具有一个旋转角度。

perspective()

：指定一个透视投影矩阵。

matrix3d()

：定义矩阵变形。

transform-origin属性

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处，如下图所示：

我们没有使用

transform-origin

改变元素原点位置的情况下，CSS变形进行的旋转、移

位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同

的位置对元素进行变形操作，我们就可以使用

transform-origin

来对元素进行原点位置

改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

如果我们把元素变换原点（

transform-origin

）设置0（x） 0（y），这个时候元素的变

换原点转换到元素的左顶角处，如下图所示：

ransform-origin

属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、

left和center这样的关键词。

2D的变形中的

transform-origin

属性可以是一个参数值，也可以是两个参数值。如果

是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的

位置。

3D的变形中的

transform-origin

属性还包括了Ｚ轴的第三个值。其各个值的取值简单

说明如下：

x-offset：用来设置

transform-origin

水平方向Ｘ轴的偏移量，可以使用

和

值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是

负值（从中心点沿水平方向Ｘ轴向左偏移量）。

offset-keyword：是

top

、

right

、

bottom

、

left

或

center

中的一个关键词，可以用来设

置

transform-origin

的偏移量。

y-offset：用来设置

transform-origin

属性在垂直方向Ｙ轴的偏移量，可以使用

和

值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以

是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。

x-offset-keyword：是

left

、

right

或

center

中的一个关键词，可以用来设置

transform-origin

属性值在水平Ｘ轴的偏移量。

y-offset-keyword：是

top

、

bottom

或

center

中的一个关键词，可以用来设置

transform-origin

属性值在垂直方向Ｙ轴的偏移量。

z-offset：用来设置3D变形中

transform-origin

远离用户眼睛视点的距离，默认值

z=0

，

其取值可以

，不过

在这里将无效。

看上去

transform-origin

取值与

background-position

取值类似。为了方便记忆，

可以把关键词和百分比值对比起来记：

top = top center = center top = 50% 0

right = right center = center right = 100%或(100% 50%)

bottom = bottom center = center bottom = 50% 100%

left = left center = center left = 0或(0 50%)

center = center center = 50%或（50% 50%）

top left = left top = 0 0

right top = top right = 100% 0

bottom right = right bottom = 100% 100%

bottom left = left bottom = 0 100%

为了让大家能一眼看明白，下面截图以transform中的旋转rotate()为例，并transform-origin

取值不一样时的效果：

transform-origin取值为center（或center center或50% 或50% 50%）：

transform-origin取值为top（或top center或center top或50％ 0）：

transform-origin取值为right(或right center 或center right 或 100％ 或 100％ 50％)：

transform-origin取值为bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值为left(或left center或center left或0或0 50％):

transform-origin取值为top left(或left top或0 0)：

transform-origin取值为right top（或top right或100％ 0）：

transform-origin取值为bottom right（或right bottom或100％ 100％）:

transform-origin取值为left bottom（或bottom left 或 0 100％）: