CSS3 2D Transform

程序员文章站 2024-01-24 21:59:22

...

CSS3 2D变换让Web设计师有了更多的*来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

位移translate()函数

大家不要误会了，translate并不是指翻译外国语言，在这里translate是一种方法，将元素向指定的方向移动，类似于position中的relative。可以简单的理解为，使用translate()函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。

translate()函数的使用语法如下：

translate(tx)

或者

translate(tx,ty)

translate()函数可以取一个值tx，也可以同时取两个值tx和ty，其取值具体说明如下：

tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。

CSS3 2D Transform

结合起来，translate()函数移动元素主要有以下三种移动：

水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；
垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

现在我们来看一些有关于translate()函数的简单例子。我们使用transform:translate(tx,ty)将一个对象从其原始位置移动，其中tx值为正值和ty值等于0时，对像向右移动：

HTML

<div> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div>

CSS

div {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(images/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%; }

//默认图片都在容器中水平垂直居中
div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -50px; 
}
div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    opacity: 1;
    z-index: 2;
    transform: translate(100px,0);
}

效果如下图所示：

在这个示例中，我们让扑克牌梅花King相对于原点中心位置向右移动100像素。如果仅需让元素向右移动，我们可以省略ty值。换句话说ty值为０时可以省略不写。如此一来，上面的效果等同与：

div img:nth-child(2){ opacity: 1; z-index: 2; transform: translate(100px); }

要将一个对象移动到左边，我们只需要输入一个负数的X轴坐标，而Y坐标应保持０，基于前面的实例，我们将扑克牌向左边移动100像素：

div img:nth-child(2){ transform: translate(-100px,0); }

效果如下图所示：

垂直移动一个对象很简单，几乎和水平移动对象相同。唯一的区别是，我们将使用Y轴的值控制对象向上和向下移动位移量。正如我们前面提到的，Y轴的坐标值为正值时，对像向下移动；反之其坐标值为负值时，对象向上移动。而X轴的坐标值应该保持为０。我们来看一个简单的实例，将一扑克牌向上，向下移动100像素：

div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ z-index: 2; transform: translate(0,-100px); } div img:nth-child(3){ z-index: 3; transform: translate(0,100px); }

其效果如下图所示：

要让一个元素对角移动，我样将结合X轴和Y轴两坐标的值。根据不同的方向，X轴和Y轴的值可能是正值或是负值。如果我们要将一张扑克牌向右上角移动，需要将X轴坐标设置为正值，将Y轴从标设置为负值；如果要将一张扑克牌向右下角移动，需要将X、Y轴坐标设置为正值；如果要将一张扑克牌向左上角移动，需要将X、Y轴坐标设置为负值；如果要将扑克拍向左下角移动，需要将X坐标设置为负值，Y轴坐标设置为正值。

div img:nth-child(1){ opacity: .5; z-index: 1; } div img:nth-child(2){ z-index: 2; transform: translate(100px,-100px); } div img:nth-child(3){ z-index: 3; transform: translate(100px,100px); } div img:nth-child(4){ z-index: 3; transform: translate(-100px,-100px); } div img:nth-child(5){ z-index: 3; transform: translate(-100px,100px); }

其效果如下所示：

如果我们要将对象沿着一个方向移动，比如说沿着水平轴或者纵轴移动，可以实使用translate(tx,0)和translate(0,ty)来实现。其实在变形中还为单独一个方向移动对象提供了更简单的方法：

translateX()：水平方向移动一个对象。通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说，对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：纵轴方向移动一个对象。通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。简单点说，对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。

这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以，transform:translate(-100px,0)实际上等于transform:translateX(-100px);transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

缩放scale()函数

缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

CSS3 2D Transform

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。其使用语法如下：

scale(sx)

或者：

scale(sx,sy)

其取值简单说明如下：

sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在X轴方向放大。
sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。

这有一个简单的实例：

HTML

<div> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div>

CSS

div { width: 500px; height: 500px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } div img { position: absolute; top: 50%; left: 50%; margin-left: -35px; margin-top: -50px; } div img:nth-child(1){ opacity: .8; z-index: 2; border: 1px solid red; } div img:nth-child(2){ z-index: 1; transform: scale(1.5); }

效果如下所示：

上面的例子将扑克牌放大了1.5倍或是实际尺寸的150%。因为我们同时对X和Y轴方向方大，所以我们只需要给scale()声明一个值。你也可以使用transform:scale(1.5,1.5)实现想相同的效果。

此外如果我们要缩小一个元素，我们会专门使用一个0~0.9999的值，像下面的例子，我们将扑克牌缩放一半，也就是实际尺寸的50%。

div img:nth-child(2){ z-index: ２; transform: scale(.5); }

效果如下所示：

但是，要小心，如果你将值设置为“0”时，元素将会消失。我想，如果没必要，你是不会这样做的。当我们仅给scale() 函数只显式设置一个值时，会使对象成正比例放大或缩小。如果需要将对象在X轴和Y轴两个方向设置不同的值。

div img:nth-child(2){ z-index: 2; transform: scale(.5,1.2); }

效果如下所示：

scale()函数和translate()函数极其相似，除了能通过scale()函数使用元素水平方向和垂直方向同时缩放（也就是元素沿X轴和Y轴同时缩放）之外，也可以使元素仅沿着X轴或Y轴方向缩放：

scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

通过上面的介绍，让我们不由想起图形编辑软件中的缩放工具，对对象进行缩放效果。在CSS3中的scale()函数和图形编辑软件中的缩放工具几乎相同：

CSS3 2D Transform

在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。

HTML

<div class="wrapper"> <div>Scale(-1.5)</div> </div>

CSS

.wrapper { width: 500px; height: 400px; margin: 30px auto; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; } .wrapper > div { position: absolute; background-color: hsla(220,20%,20%,.3); top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 198px; height: 198px; border: 1px dotted orange; text-align: center; line-height: 198px; color: #fff; font-size: 20px; transform: scale(-1.5); }

效果如下：

scale()函数对元素进行缩放时，都是以元素的中心为基点，但可以通过transform-origin来改变元素的基点。

旋转rotate()函数

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

CSS3 2D Transform

rotate()函数的使用很简单，其基本语法如下：

rotate(a);

rotate()函数只接受一个值，其属性值简单说明如下：

a：代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转。

接下来，我们来看一个简单的例子，扑克牌相对于元素中心点顺时针旋转45度：

HTML

<div> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" /> </div>

CSS

div { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; } div img { position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -100px; } div img:nth-child(1){ z-index: １; opacity: .6; } div img:nth-child(2){ z-index: 2; transform: rotate(45deg); }

效果如下所示：

在默认之下，rotate()函数旋转元素是相对于元素中心点进行旋转，同样，我们可以通过transform-origin属性重置元素的旋转原点：

div img:nth-child(2){ z-index: 2; transform-origin: top left; transform: rotate(45deg); }

基于上例，修改旋转原点后的效果就完全不同了：

rotate()函数也同样可以和图形编辑软件中的旋转工具的功能对比起来理解。如下图所示的是CSS3中rotate()函数在2D中的旋转与Photoshop制作软件中旋转工具的对比：

CSS3 2D Transform

倾斜skew()函数

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。语法格式如下：

skew(ax)

或者

skew(ax,ay)

其属性值说明如下：

ax：用来指定元素水平方向（X轴方向）倾斜的角度。
ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。

这里有一个简单的例子：

div img:nth-child(1){ z-index: １; opacity: .6; } div img:nth-child(2){ z-index: 2; transform: skew(30deg,10deg); }

效果如下图所示：

倾斜skew()函数和CSS3中变形中的translate()、scale()函数一样，除了可以使用skew(tx,ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外，还可以使用skewX()和skewY()函数让元素只在水平或垂直方向倾斜。

skewX()：相当于skew(ax,0)和skew(ax)。按给定的角度沿X轴指定一个倾斜变形。skewX()使元素以其中心为基点，并在水平方向（X轴）进行倾斜变形。
skewY()：相当于skew(0,ay)。按给定的角度沿Y轴指定一个倾斜变形。skewY()用来设置元素以其中心为基点并给定的角度在垂直方向（Y轴）倾斜变形。

在默认情况之下，skew()函数都是以元素的原中心点对元素进行倾斜变形，但是我们同样可以根据transform-origin属性，重新设置元素基点对元素进行倾斜变形。另外，skew()函数和制图软件中的变形工具所起作用类似。

CSS3 2D Transform

矩阵matrix()函数

CSS3中Transform让我们操作变形变得很简单，诸如，位移translate()函数、缩放scale()函数、旋转rotate()函数和倾斜skew()函数。这几个函数很简单，也很方便，但是变形中的矩阵函数matrix()对于我们来说就不常使用了。

当然，Web设计师可以使用rotate()、skew()、scale()和translate()函数来满足他们的变形需要，那我们为什么要劳烦矩阵matrix()呢？在CSS3中的变形函数都可以使用matrix()函数来代替，例如：

使用矩阵可以实现一个复杂的2D变形，如下：

#object { transform-origin: 0 0; transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px) }

使用一个矩阵matrix()规则变成如下：

#object { transform-origin: 0 0; transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px) }

你也许很讨厌matrix()函数中的一大堆数字，但是要整明白CSS3变形中的matrix()函数，我们先要了解矩阵matrix是怎么一回事。接下来我们一起探讨一下transform中的matrix。

在CSS3中变形的matrix分为两种，一种是2D矩阵，另外一种是3D矩阵。我们就先从简单的入手——2D矩阵matrix。

CSS3中的2D矩阵matrix总共提供了六个参数:a,b,c,d,e和f，其基本写法如下：

matrix(a,b,c,d,e,f)

实际上，这六个参数，对应的矩阵就是：

CSS3 2D Transform

在开始之前，首先来复习下一个简单的线性代数知识：矩阵与向量乘法。太复杂的我们用不到，我们只需要了解三维向量与3 x 3矩阵的乘积：

CSS3 2D Transform

弄明白3x3的矩阵之后，即可知道matrix计算方法。x和y是元素初始原点的坐标，x’和y’则是通过矩阵变换后得到的新原点坐标。通过中间的那个3x3的变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。依据矩阵变换规则即可得到：x’=ax+cy+e和y’=bx+dy+f：

CSS3 2D Transform

上面的一大堆的字母让你看了犯迷糊，为了让人更好的理解，我们一起来看一个简单的例子。假设矩阵参数如下：

transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/

现在，我们根据这个矩阵偏移元素的中心点，假设是(0,0)，即x=0，y=0。

我们可以按照上面介绍的矩阵方式，将这个列成矩阵：

CSS3 2D Transform

于是，变换后的原点位置x’和y’可以根据矩阵向量的计算规则计算出来：

CSS3 2D Transform

也就是计算得出x’=50，y’=50。即元素的原点由(0,0)移动到(50,50)的位置。实际上transform:matrix(1,0,0,1,50,50);就等同时transform: translate(50px,50px)。

HTML

<div class="matrix"> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div> <div class="translate"> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> </div>

CSS

.matrix img:nth-child(2){ z-index: 2; transform: matrix(1,0,0,1,50,50); } .translate img:nth-child(2){ z-index: 2; transform: translate(50px,50px); }

效果如下所示：

通过一些篇幅介绍了矩阵的一些基础知识，并通过一个简单的实例用matrix()函数实现translate()的位移效果。接下来我们分别看看CSS3变形中matrix()和各变形函数之间的关系。

translate()转换成matrix()

首先来看最简单的位移translate()函数。我们都知道transform:translate(tx,ty)的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变形中，translate的matrix的参数为：

matrix(1,0,0,1,tx,ty)/*tx,ty分别对应X和Y轴的增量*/

其对应的矩阵图：

CSS3 2D Transform

由此公式可知：transform:translate(100px,100px)；即对应着transform:matrix(1,0,0,1,100,100)；推算出的结果：x’=x+tx=x+100；y’=y+ty=y+100。

scale()转换成matrix()

transform:scale(sx,sy)将一个元素按指定的倍数进行缩放，它对应的矩阵是：

matrix(sx*x,0,0,sy*y,0,0);/*sx和sy分别对应X轴和Y轴的缩放比率*/

其对应的矩阵图：

CSS3 2D Transform

由此公式可知：transform:scale(1.5,1.5);及对应着transform:matrix(1.5,0,01.5,0,0);推算出的结果：x’=x*sx=1.5*x；y’=y*sy=1.5*y。

rotate()转换成matrix()

transform:rotate(a)将一个元素按指定的角度旋转，它对应的矩阵是：

　matrix(cos(a),sin(a),-sin(a),cos(a),0,0)；/*cos(a)和sin(a)是指旋转度转*/

CSS3 2D Transform

由此公式可知：transform:rotate(45deg);及对应着transform:matrix(0.53,0.85,-0.85,0.53,0,0);[sin(45’)=0.85,cos(45’)=0.53]。推算出来的结果：x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y；y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y。

skew()转换成matrix()

transform:skew(ax,ay)将一个元素按指定的角度在X轴和Y轴倾斜，它对应的矩阵是：

matrix(1,tan(ay),tan(ax),1,0,0)/*tan(ax)和tan(ay)是对应的倾斜角度*/

其对应的矩阵图：

CSS3 2D Transform

由此公式可知：transform:skew(45deg)，对应着transform:matrix(1,0,1,1,0,0)，其中tan(45’)=1。推算出来的结果：x’=x + tan(a)*y；y’=tan(a)*x + y。

上面演示的是CSS3中常见的变形与矩阵的关系，除了上面演示的之外，还有其他的一些。下图就是所有CSS3变换与矩阵等价的关系图：

CSS3 2D Transform

matrix()实现镜像

在制图软件中变形工具除了旋转、倾斜、位移、缩放等还有镜向（水平镜向、垂直镜向）：

CSS3 2D Transform

但镜像对称在CSS3变形中没有相应的简化操作。只能通过矩阵matrix()来实现。通过前面的内容介绍，我们清楚的知道，元素变形的原点是其中心点（在没有显式的重置之外），那么这个镜向的原点也不例外。因为该轴永远经过原点，因此，任意对称轴都可以用y=k*x直线表示。则matrix表示就是：

matrix((1-k^2)/(1+k^2),2k / (1 + k^2),2k/(1+k^2),(k^2-1)/(1+k^2),0,0)

这个如何得到的呢？我们来看看实现的过程。如下图所示，已经y=k*x，并且知道点(x,y)，求其对称点（x’,y’）的坐标位置：

CSS3 2D Transform

很简单，一是垂直，二是中心点在轴线上，因此有：

(y-y') / (x - x') = -1/ k     →       ky-ky' = -x+x'
(x + x') / 2 * k = y + y'     →       kx+kx' = y+y'

很简单的，把x’和y’提出来，就有：

x' = (1-k^2)/(k^2+1) *x + 2k/(k^2+1) *y;
y' = 2k/(k^2+1) *x + (k^2-1)/(k^2+1) *y;

再结合矩阵公式：

x' = ax+cy+e;
y' = bx+dy+f;

我们就可以得到：

a = (1-k^2)/(k^2+1); b = 2k/(k^2+1); c = 2k/(k^2+1); d = (k^2-1)/(k^2+1);

也就是上面matrix矩阵中的参数值。

CSS3 2D Ttransform兼容性

CSS3的2D变形到目前为止在主流浏览器中得到较好的支持.CSS3的2D变换虽然得到众多主流浏览器的支持，但在实际使用的时候需要添加浏览器各自的私有属性：

IE9中使用2D变形时，需要添加-ms-私有属性，在IE10+版本开始支持标准版本。
Firefox3.5至Firefox15.0版本需要添加-moz-的私有属性，在Firefox16+版本开始支持标准版本。
Chrome4.0+开始支持2D变形，在实际使用的时候需要添加-webkit-私有属性。
Safari3.1+开始支持2D变形，在实际使用的时候需要添加-webkit-私有属性。
Opera10.5+开始支持2D变形，在实际使用的时候需要添加-o-私有属性，但在Opera12.1版本不需要添加私有属性，不过在Opera15.0+版本需要添加私有属性-webkit-私有属性。
移动设备iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+需要添加私有属性-webkit-，而Opera Mobile11.0至Opera Mobile12.1和Firefox for Android19.0+不需要使用浏览器私有属性。

在这一节中详细介绍了CSS3中2D tansform各函数的使用。通过早期的CSS3 Transform一文和近期新发布的CSS3 Transform——transform-origin、Transform-style和Perspective属性和本文的介绍，有关于CSS3 transform的相关知识就只剩下了3d transform。接下来的一节中，将主要介绍3d transform。希望这一系列的教程能帮助您更好的理解CSS3 transform。敬请期待下一节的到来，如果你对transform有更好的理解，希望能在下面的评论中与我们一起分享。如需转载，烦请注明出处：http://www.w3cplus.com/css3/css3-2d-transform.html

转载于:https://my.oschina.net/goucw/blog/184608

上一篇：一道Java面试题的做法

下一篇： Java实现中缀表达式转换为后缀表达式

CSS3 2D Transform

位移translate()函数

HTML

CSS

缩放scale()函数

HTML

CSS

HTML

CSS

旋转rotate()函数

HTML

CSS

倾斜skew()函数

矩阵matrix()函数

HTML

CSS

translate()转换成matrix()

scale()转换成matrix()

rotate()转换成matrix()

skew()转换成matrix()

matrix()实现镜像

CSS3 2D Ttransform兼容性

下一节

CSS3 2D Transform

CSS3结合jQuery实现动画效果及回调函数的实例

突袭HTML5之Canvas 2D入门4-直接操作像素

CSS之2D转换(transform)

CSS3之transform属性-2D转换

CSS3:2D转换

关于css3中nth-of-type()的使用

CSS3:2D动画

css3 transform(2D)的使用

2d动画制作软件有哪些（可以自己制作动画的软件推荐）