一、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%;