CSS3 2D Transform

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3 2D Transform相关的知识,希望对你有一定的参考价值。

在 一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外, 还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。

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。

技术分享

结合起来,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值为0时可以省略不写。如此一来,上面的效果等同与:

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

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

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

效果如下图所示:

技术分享

垂直移动一个对象很简单,几乎和水平移动对象相同。唯一的区别是,我们将使用Y轴的值控制对象向上和向下移动位移量。正如我们前面提到的,Y轴的坐 标值为正值时,对像向下移动;反之其坐标值为负值时,对象向上移动。而X轴的坐标值应该保持为0。我们来看一个简单的实例,将一扑克牌向上,向下移动 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的值,让元素显得更大。

技术分享

缩放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: 2;       
    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轴(纵横方向)缩放元素,其默认值是1。

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

技术分享

在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旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。

技术分享

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: 1;
    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制作软件中旋转工具的对比:

技术分享

倾斜skew()函数

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

skew(ax)

或者

skew(ax,ay)

其属性值说明如下:

  • ax:用来指定元素水平方向(X轴方向)倾斜的角度。
  • ay:用来指定元素垂直方向(Y轴方向)倾斜的角度。如果未显式的设置这个值,其默认为0。

这里有一个简单的例子:

div img:nth-child(1){
    z-index: 1;
    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()函数和制图软件中的变形工具所起作用类似。

技术分享

矩阵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)

实际上,这六个参数,对应的矩阵就是:

技术分享

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

技术分享

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

技术分享

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

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。

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

技术分享

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

技术分享

也就是计算得出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 

以上是关于CSS3 2D Transform的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 3D Transform

CSS3_02

CSS3 transform介绍 (简书)

CSS3 2D/3D转换手把手教你

CSS3 2D/3D转换手把手教你

前端2D变形transform