CSS3动画属性之Transform

一、transform 属性（形状变换）

transform 属性：对元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动、缩放、旋转或倾斜。

1.1 translate 移动

translate 方法用于从当前位置移动一个元素。

语法

translateX() 向 x 轴移动元素 translateY() 向 y 轴移动元素 translateZ() 向 z 轴移动元素 translate3d(x, y, z) 简写：translate(x, y) --> translate(x, y)

小试牛刀

/* 多个属性值之间用“空格”分隔！ 负号表示相反方向*/
transform: translateX(100px) translateY(50px);
/* transform: translate(100px, 50px) */
复制代码

1.2 rotate 旋转

rotate 方法通过指定角度参数对元素进行旋转。

语法

rotateX() rotateY() rotateZ() rotate3d(x,y,z) 简写：rotate() --> rotateZ()

小试牛刀

/* 向顺时针旋转方向旋转90度，负号表示逆时针方向 */
transform: rotate(90deg)
/* transform: rotateZ(90deg) */
复制代码

1.3 scale 缩放

scale 方法和 translate 方法相似，都有3个方向的变换。它的缩放基数为1，它的参数大于1就放大，小于1就缩小。

语法

scaleX() scaleY() scaleZ() scale3d(x, y, z) 简写：scale(x, y) | scale(n) --> scale(n, n)

小试牛刀

/* transform: scaleX(3) scaleY(2); */
transform: scale(3, 2);
复制代码

1.4 skew 倾斜

skew 方法可以让元素沿着 x 轴或者 y 轴倾斜变形。

语法

skewX(ndeg) skewY(ndeg) 简写：skew(x, y)

小试牛刀

/* transform: skewX(30deg) skewY(10deg); */
transform: skew(30deg, 10deg);
复制代码

---

二、transform-origin 元素基点

元素的默认基点就是自身的中心位置，所以在移动、旋转和倾斜时均是以元素自身的中心位置为原点进行的。 那么当我们想要让元素按照一定的参照点进行形状变换的时候，就要用到 transform-origin 属性了。

语法

语法： transform-origin: x y z; x: x轴水平方向的取值，可以是 left | center | right | length | % y: y轴垂直方向的取值，可以是 top | center | bottom | length | % z: z轴方向的取值，是length 1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50% 0（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

小试牛刀

(1) transform-origin: top left;

(2) transform-origin: right;

(3) transform-origin: 50% 50%;