CSS3 变换_html/css_WEB-ITnose

概览

CSS3 变换也叫 2D/3D转换，主要包括以下几种：旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和 移动(translate) 以及 矩阵变形(matrix) 。transform 属性常和 transition 一起使用来构造绚丽的过渡动画效果。

本文涉及的内容较多，不太好理解，需要耐心认真阅读。

小试牛刀

    
上海鲜花港的郁金香，花名：Ballade Dream。
    
2010年上海世博会，中国馆。

结合 transition 和 transform 实现的绚丽动画墙效果。

2D 变换

所谓的 2D 变换，就是指在二维平面上的变换，中学学的平面几何。

2D 变换就是围绕 x 轴，y 轴及 原点 组成的平面所做的一些变换。

移动 translate

移动分三种情况，对应transform的三种值。

translate(x, y)

水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动），当值为负数时，反方向移动物体。

transform: translate([, ]) ;

例如：transform: translate(100px, 20px);

translateX(x)

水平方向上移动。

transform: translateX(100px);

translateY(y)

垂直方向上移动。

transform: translateY(20px);

旋转 rotate

通过指定的角度对元素进行旋转。值为正顺时针旋转，值为负逆时针旋转。

transform: rotate(30deg);

缩放 scale

缩放 scale和移动 translate极其相似，他也具有三种情况，只是参数对应的是缩放的倍数，允许小数、负数。

scale(x, y)

水平和垂直方向上同时进行缩放。

transform: scale([, ]);

例如： transform: scale(2, 1.5); 宽度是原来的2倍，高度是原来的1.5倍。

接下来我们来体验一下负值的效果。

scaleX(x)

水平方向缩放。

transform: scaleX(2);

scaleY(y)

垂直方向缩放。

transform: scaleY(2);

扭曲 skew

扭曲 skew和 translate、scale一样同样具有三种情况，只是参数值对应的是扭曲的度数。

skew(x, y)

使元素在水平和垂直方向同时扭曲，值为扭曲的度数。

transform: skew( [, ]);

例如：transform:skew(30deg, 10deg);

注意上图中的度数偏转，x轴方向的扭曲是拉y轴，y轴方向的扭曲是拉x轴，角度的方向也很古怪，注意记忆。

skewX(x)

在水平方向进行扭曲变行。

transform: skewX(30deg);

skewY(y)

在垂直方向进行扭曲变形。

transform:skewY(10deg);

3D 变换

3D 变换就是在三维环境下的变换，中学时的立体几何。

3D 变换没有扭曲操作，有移动，旋转，缩放。

介绍 3D 变换 之前我们需先介绍跟3D密切相关的4个属性。

透视 perspective

perspective 属性定义 3D 元素距视图的距离，你可以形象的理解为物体距你的距离，以像素计。该属性的存在与否决定了你看到的是2D还是3D，没有透视，不成3D。

透视的使用及是否使用透视的区别会在下面的具体变换中介绍。

透视基点 perspective-origin

透视基点也直接影响透视的结果，形象点说就是透视基点就相当于你站在一个位置看你面前的物体，你可以蹲着看，可以站着看，可以左侧斜着身子看，可以右侧斜着身子看，你的眼睛看的位置不同，可能看到物体的形状就不同。

透视点有默认值 perspective-origin: 50% 50%;, 当为元素定义 perspective-origin 属性时，其子元素会获得相应效果，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis 可选值：

• left

• center

• right

• length

• %

y-axis 可选值：

• top

• center

• bottom

• length

• %

理解perspective-origin 这样描述的：默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。

呈现样式 transform-style

transform-style 属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat 和preserve-3d。

transform-style: flat | preserve-3d;

其中flat 值为默认值，表示所有子元素在2D平面呈现。preserve-3d 表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style 的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现而不是它的前面或者后面。如果对一个元素设置了transform-style 的值为preserve-3d ，它表示不执行平展操作，他的所有子元素位于3D空间中。

transform-style 属性需要设置在父元素中。

具体的使用看下面的具体变换。

背面可见 backface-visibility

在现实世界中，你在一张白纸上写下一些字，一般情况下从白纸后面是看不到写的啥的。而在CSS3的3D世界里，默认是可以从白纸的后面看到前面( visible )的内容的。

backface-visibility: visible | hidden;

下面旋转的时候有例子。

移动 translate

3D 移动有 translate3d(x, y, z) 和 translateZ(z) 两个变换函数。当然 2D 移动的那三个也可以应用到 3D 移动。

translate3d(x, y, z)

分别沿x, y, z 三个轴同时移动。

x, y轴的移动比较好理解，translate3d(x, y, 0) 等价于 translate(x, y), z 轴的移动你可以理解为：在你眼前的一个物体向你走来和远去，离你越近（z值越大）你感觉它越大，离你越远（z值越小）你感觉它越小。不过，变大变小是有前提的，就是我们前面说到的 perspective 属性需要指定合适的值。

对比如下实例：

这个例子包含不少内容，请认真品读。

例子里有四个场景，s3 没有加透视( perspective: none; )，往z 轴移动了，图片没有任何大小变化，s4 的呈现样式为 transform-style: flat; ，图片堆叠在一个平面内。s1 和 s2 既加了透视又设置样式为3D，所以s1 向视点靠近，图片变大，s2向视点远离，图片变小，同时呈现出遮隐效果。

经过这个例子相信你能大概明白 perspective 和 transform-style 的作用了。

translateZ(z)

沿z轴方向移动。

如果你理解了上面的例子，这个自然就明白了。

借此属性，再来说说 perspective. translateZ 的功能就是让元素在自己的眼前或近或远，元素或大或小。不过需要注意的是：当translateZ值非常接近perspective，但不超过的时候，该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大的时候，就看不见了——我们是看不见眼睛后面的东西的！

下图的效果是从 transform: translateZ(-150px); -> transform: translateZ(200px); 的效果。视距为150px

旋转 rotate

2D 旋转比较简单，只有一个函数，围绕一点旋转多少度即可，而3D 旋转要复杂的多，毕竟在三维空间了。

rotateX(angle)

x为旋转轴旋转指定的度数。

基本类似下图的旋转。

transform: translate(30px) rotateX(30deg);

rotateY(angle)

y为旋转轴旋转指定的度数。

基本类似下图的旋转。

transform: translate(0, 30px) rotateY(45deg);

rotateZ(angle)

z为旋转轴旋转指定的度数。从效果上来看，其实它和2D 变换的 rotate(angle) 完全一致。

transform: rotateZ(45deg);transform: rotate(45deg);

rotate3d(x, y, z, angle)

除了上面的三个外，还有一个 rotate3d.

我们知道 rotateX 是以x轴为旋转轴， rotateY是以y轴为旋转轴， rotateZ 是以z轴为旋转轴，如果我不想以这三个轴为旋转轴呢？这时我们的 rotate3d 就派上用场了。

中学我们学过向量（空间向量），[x, y, z] 三个向量可以确定一个空间向量，向量是有方向和大小的，三个值的范围均是 [-1 1], 例如：x=1 表示x轴正方向，x=-1 表示x轴反方向。

• rotateX(a)函数功能等同于 rotate3d(1,0,0,a)

• rotateY(a)函数功能等同于 rotate3d(0,1,0,a)

• rotateZ(a)函数功能等同于 rotate3d(0,0,1,a)

下面的测试可以看出正负值的区别。

再看一下 rotate3d(1, 1, 1, 45deg) 和 rotate3d(-1, -1, -1, 45deg) 的。

你只要有一定的空间想象能力，能确定旋转轴位置，就能差不多想通它的变换，实在不行，拿一张扑克用手转转。

注： 本属性的效果中我没有添加transform-style: preserve-3d; 你实践的时候记得添上，并再次体会 flat 和 preserve-3d 的区别。

学完了旋转，我们继续来探讨上面提到的几个相关属性。

backface-visibility

此属性用来设置元素是否透明，默认是透明的。下面举例对比。

backface-visibility: visible;transform: translate3d(30px,30px,200px) rotateY(0deg);/*从0不断增加*/

backface-visibility: hidden;transform: translate3d(30px,30px,200px) rotateY(0deg);/*从0不断增加*/

perspective

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性值写在一起。

.stage {    perspective: 300px;}.stage .box {    transform: perspective(300px) rotateY(45deg);}

关于两者的区别，可以用下面的示例来区分。

上面是设置在舞台元素上，下面是设置在每个元素上。图中的效果其实不难理解。上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！

上面的第8个元素不见了，这不难理解，前面一排门，每个门都是1米宽，你距离门3米，显示，当所有门都开了45°角的时候，此时，距离中间门右侧的第三个门正好与你的视线平行，这个门的门面显然就什么也看不到。

缩放 scale

3D变形中的缩放主要有 scaleZ(z) 和 scale3d(x,y,z) 两种函数。

scaleZ(z)

2D 环境下的缩放比较好理解，元素进行相应的放大缩小即可，而3D 环境下涉及到z 轴的缩放，z 轴的缩放很奇怪，至今没有想太透彻，只是简单的实践实践。有晓得的留言告知，后期想透彻了再更新此处。

我进行了若干种情况的实践。

一，单独使用 scaleZ ,发现无论如何改变缩放值，都没有任何变化。

    
        
1
    
    
        
2
    

二，让子元素.front进行3D变换，这时调整值，可以看出缩放效果。

    
        
1
    
    
        
2
    

三，取消.front的变换，将变换应用到.c2上并置于缩放前，改变缩放值，没有任何变化。

    
        
1
    
    
        
2
    

四，调换移动和缩放的位置，再改变缩放的值，可以看出变化。

    
        
1
    
    
        
2
    

五，改变transform-origin（下面会介绍此属性）的默认值，再改变缩放值也可以看出变化。

    
        
1
    
    
        
2
    

你看懂3D 缩放了吗？

scale3d(x,y,z)

此属性值不再多介绍，x, y, z 同scaleX(x), scaleY(y), scaleZ(z)。

transform-origin

transform-origin 是用来设置变换基点的属性，所谓变换基点即变换的参照点，上面之所以没有说，是因为其有默认值是元素的中心点，并且可以用来设置2D变换和3D变换的基点。

平移操作不受基点位置的影响，旋转，缩放，扭曲都跟基点有关联。

例如：按元素中心旋转45度和按左上角旋转45度。

更改基点很好掌握，其属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

具体语法如下：

/*只设置一个值的语法*/transform-origin: x-offsettransform-origin:offset-keyword/*设置两个值的语法*/transform-origin：x-offset  y-offsettransform-origin：y-offset  x-offset-keywordtransform-origin：x-offset-keyword  y-offsettransform-origin：x-offset-keyword  y-offset-keywordtransform-origin：y-offset-keyword  x-offset-keyword/*设置三个值的语法*/transform-origin：x-offset  y-offset  z-offsettransform-origin：y-offset  x-offset-keyword  z-offsettransform-origin：x-offset-keyword  y-offset  z-offsettransform-origin：x-offset-keyword  y-offset-keyword  z-offsettransform-origin：y-offset-keyword  x-offset-keyword  z-offset

对上述的值简述如下：

• x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用和值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。

• offset-keyword：是top、right、bottom、left或center中的一个关键词。

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

变换基点作用在当前元素上。

矩阵变换 matrix

矩阵变换既可以进行2D变换，又可以进行3D变换，上面所有的变换都可以通过矩阵变换来实现，换句话说，上面介绍的变换都是矩阵变换的某个特例。

下面的内容是考验你几何数学的时候了。

CSS 中使用 4x4 矩阵表示变换。

矩阵中全是数（整数或小数，或者正数、负数和零），数字对于我们的显示器来说，你可以理解为像素值。

变换是建立在平面或空间上的，数字自然而然的可以对应坐标值。

既然引入了坐标系，你自然而然的想到坐标原点，没错，就是transform-origin这厮。

2D 变换的矩阵函数是：matrix(a, b, c, d, e, f),对应的矩阵如下图。

3D 变换的矩阵函数是：matrix3d(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44)

下面罗列上述变换对应的矩阵原型：

移动 translate

3D 移动的矩阵原型为：

matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

2D 移动的原型就是上面的 tz=0 的情况。

matrix(1, 0, 0, 1, x, y)

缩放 scale

3D 缩放的矩阵原型为：

matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)

2D 移动的原型就是上面的 sz=1 的情况。

matrix(sx, 0, 0, sy, 0, 0)

旋转 rotate

3D 旋转的矩阵原型为：

旋转轴由向量 [x, y, z] 定义。在上面的 rotate3d 中介绍了。

α 为旋转的角度。

2D 旋转其实就是绕着 z 轴转，即向量 [0, 0, 1].

对应的 matrix 自己写去吧。

扭曲 skew

扭曲只有2D 扭曲。

skew(αdeg, βdeg)

只沿x轴扭曲，β=0,只沿y轴扭曲，α=0.

视距 perspective

视距也有对应的矩阵。

矩阵的运算

所有的变换都是建立在2D或3D空间中，其实也可以完全理解成3D空间（3D包含2D嘛，z轴为0不就是2D嘛）。

所有的变换理解成坐标运算就容易理解多了。

看一下矩阵乘法的定义吧：

下面以3D 移动为例演示矩阵的运算。

原坐标从 (a,b,c) 变到 (a+x,b+y,c+z).

总结

我们从直观和精确计算深入探讨了CSS3 变换的各种情况，相信你对变换已经有了一定的了解。

2D 变换除了扭曲稍微绕点，其他的都比较好理解。3D变换没有扭曲，3D旋转稍微复杂点，不过也好理解，3D缩放没有透彻理顺，谁知道请明示一下。

变换涉及到的四个属性。

perspective 设置舞台元素（变换元素的父元素），理解为人到舞台的距离。

transform-style 也是设置在父元素，控制子元素是在二维平面还是三维空间。

transform-origin 作用在变换元素上，控制变换的基点（坐标原点）。

backface-visibility 作用在变换元素上，指示变换元素旋转180度背面是否可见。

这篇文章耽搁的太久了，先这样发吧。有关于3D 缩放的记得留言讨论。

参考资料

• CSS3 Transitions, Transforms和Animation使用简介与应用展示

• 2D 和 3D 中的 CSS 轉換 (Preliminary) CSS3中 translate3D详解

• 理解CSS3 transform中的Matrix(矩阵)

• 好吧，CSS3 3D transform变换，不过如此！

• CSS3 3D Transform

• CSS3 Transform

• CSS3 Transform——transform-origin

• Mathematical Description of Transform Functions

• The Transform Functions