CSS3之2D变形

CSS3之2D变形

一直以来，WEB开发工程师只能依赖于图片、Flash和JavaScript实现一些页面外观的修改、变换。现如今当我们站在CSS3这个巨人的肩膀上，想要实现诸如元素的移动、缩放、倾斜和旋转等效果，一切都是轻而易举的。

---

1、2D位移

实现元素的位移必须通过调用translate()函数，它可以接受1~2个参数；

• 参数仅1个时，其默认为tx（横坐标的位移向量）
  
  • tx为正数则向右移，tx为负数则向左移
• 参数为2个时，则分别是tx和ty（纵坐标的位移向量）
  
  • ty为正数则向下移，ty为负数则向上移

语法示例：

img{
    transform: translate(50px); 
    /*img水平向右移动50px*/
}
或
img{
    transform: translate(50px,100px); 
    /*img水平向右移动50px并垂直向下移动100px*/
}
或
img{
    transform: translateX(50px); 
    /*img水平向右移动50px*/
}
或
img{
    transform: translateY(-100px);
    /*img垂直向上移动100px*/
}

2、2D缩放

元素的缩放必须借助于scale()函数，该函数默认根据元素的中心原点进行缩放，默认值为1，即不缩放。scale()和位移函数translate()一样，可以接受1~2个参数；

• 参数仅1个时，其默认第二个参数sy的值和第一个参数sx一样
  
  • sx和sy的值相同，代表该元素会按照原比例进行缩小或放大
• 参数为2个时，则分别是sx和sy
  
  • sx或sy的值大于0小于1时：元素缩小
  • sx或sy的值大于1时：元素放大

语法示例：

img{
    transform: scale(.5); 
    /*img水平、垂直均缩小为原尺寸的一半*/
}
或
img{
    transform: scaleX(.5); 
    /*等同于scale(.5,1),img水平缩小为原宽度的一半，垂直高度不变*/
}
或
img{
    transform: scaleY(.5); 
    /*等同于scale(1,.5),img垂直缩小为原高度的一半，水平宽度不变*/
}
或
img{
    transform: scale(2,1); 
    /*img水平放大为原宽度的两倍，垂直高度不变*/
}
或
img{
    transform: scale(-0.7); 
    /*img元素进行翻转，同时原比例缩小为原尺寸的70%*/
}
或
img{
    transform: scale(0);
    /*元素消失，若没必要一般不这么做*/
}

3、2D旋转

旋转函数rotate()通过指定的角度参数可以实现元素的2D旋转。

• 仅接受1个参数a，意义是元素旋转的角度（幅度）

  • 取值为正数时，元素顺时针旋转
  • 取值为负数时，元素逆时针旋转

• 默认情况下，rotate()函数旋转元素是以其中心点为旋转原点

语法示例：

img{
    transform: rotate(360deg); 
    /*img以旋转原点为中心顺时针旋转360度*/
}
或
img{
    transform: rotate(-180deg); 
    /*img以旋转原点为中心逆时针旋转180度*/
}

4、2D倾斜

skew()函数能够让元素以其中心位置沿着X轴或Y轴按照一定角度倾斜显示。与rotate()函数的旋转不同的是，rotate()只是旋转而不改变元素的形状，skew()则是不旋转只改变元素的形状。

• skew()函数接受1~2个参数，当参数只有1个的时候，默认为ax，此时另一个参数ay的值会被视为0。

• 当参数为2个时：

  • ax：指定元素水平（X轴）方向倾斜的角度
  • ay：指定元素垂直（Y轴）方向倾斜的角度

语法示例：

img{
    transform: skew(30deg); 
    /*img沿着X轴以正30度的角度倾斜*/
}
或
img{
    transform: skewX(20deg); 
    /*等同于skew(20deg,0),img沿着X轴以正20度的角度倾斜*/
}
或
img{
    transform: scaleY(20deg); 
    /*等同于skew(0,20deg),img沿着Y轴以正20度的角度倾斜*/
}
img{
    transform: skew(30deg，-20deg); 
    /*img沿着X轴以30度的角度倾斜，并沿着Y轴以负20度的角度倾斜*/    
}

5、2D矩阵

上述的位移translate()、缩放scale()、旋转rotate()和倾斜skew()等变形操作其实都可以使用matrix()函数来代替。

2D矩阵matrix()提供了6个参数，其换算涉及到线性代数的知识，考虑到不太常用，仅作了解，这里将不再深入探讨。

---

transform属性概述

1、transform属性

transform属性属于复合属性，可以同时书写多个变形函数的名称。

语法示例：

transform: translate(10px,20px) skewX(20deg) rotate(90deg);
/*通常复合属性的值，即叠加效果都是以逗号分隔，但在transform中书写多个transform-function时需要用空格隔开！*/ 

2、transform-origin属性

CSS3变形中的旋转、缩放和倾斜都可以通过transform-origin来重新设置元素的原点，但在位移translate()中本属性却不管用，元素在位移时始终是以其中心点为原点的。