css3 的 transform

前言

本文主要关于 css3 的 transform 属性

一、rotate（旋转）

语法： transform: rotate(90deg);
表示顺时针旋转 90度，若为负数，表示逆时针旋转90度

除了平面旋转，rotate 还可以在空间上绕轴旋转，坐标图如下：

1.1、rotateX

语法： transform: rotateX(90deg);
表示绕 X 轴，向上旋转90度。

1.2、rotateY

语法： transform: rotateY(90deg);
表示绕 Y 轴，向右旋转90度。

1.3、rotateZ

语法： transform: rotateZ(90deg);
Z 轴正对着我们的面前，相当于平面上顺时针旋转90度。

1.4、rotate3D

语法： transform: rotateZ(0，0，0，deg);
前三个数值表示是否绕 X 、Y、Z 轴旋转，0表示否，1表示是。最后一个表示旋转的角度。

二、translate（移动）

语法：transform: translate(100px, 100px);
表示在平面上，沿 X、Y轴移动100像素。起始点默认为元素中心位置，可以通过 transform-origin 改变起始点的坐标位置。

2.1、translateX

语法： transform: translateX(100px);
从起始点沿 X 轴移动，起始点默认为元素中心位置。

2.2、translateY

语法： transform: translateY(100px);
从起始点沿 Y 轴移动，起始点默认为元素中心位置。

2.3、translateZ

语法： transform: translateZ(100px);
从起始点沿 Z 轴移动，起始点默认为元素中心位置。

三、scale（缩放）

语法：transform: scale(0.8,1.5);
分别表示对 X、Y 方向进行操作，数字表示缩放的倍数，大于1元素放大，小于1元素缩小。中心点默认为元素中心位置，可以通过 transform-origin 改变中心点的坐标位置。

3.1、scaleX

语法： transform: scaleX(1);
表示元素在 X 轴缩放元素。

3.2、scaleY

语法： transform: scaleY(1);
表示元素在 Y 轴缩放元素。