# 一、概念
Transform字面意思就是变形，改变的意思，该元素应用于2D和3D转换
该属性允许对元素进行旋转、缩放、移动和倾斜
在css3中transform主要包括以下几种：
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
# 二、语法
transform: rotate | scale | skew | translate | matrix;
transform属性实现了一些可用SVG实现的同样功能，它可用于内联(inline)函数和块级(block)元素，它允许我们旋转，缩放和移动元素
他有几个属性值参数：rotate；translate；scale；skew；matrix
# 三、变形
# 3.1 rotate旋转
通过指定的角度参数对原元素指定一个2D 旋转和3D旋转，需先有transform-origin属性的定义
transform-origin：旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转
/* rotate():2D旋转 */
transform: rotate(45deg);
/* rotateX():沿着X轴3D旋转 */
transform: rotateX(45deg);
/* rotateY():沿着Y轴3D旋转 */
transform: rotateY(45deg);
/* rotateZ():沿着Z轴3D旋转 */
transform: rotateZ(45deg);
/* rotate3d(x,y,z,angle):3D旋转，接受四个参数，x,y,z介于0-1之间，angle是旋转的度数 */
/* 元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D */
transform: rotate3D(1,1,1,45deg);
# 3.2 translate移动
translate表示移动状态
分为三种情况：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）translateX(x)仅水平方向移动（X轴移动）translateY(Y)仅垂直方向移动（Y轴移动）translate3d(x, y, z)沿 X Y Z 轴位移
# 3.3 scale缩放
缩放scale和移动translate是极其相似，具有三种情况：
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）scaleX(x)元素仅水平方向缩放（X轴缩放）scaleY(y)元素仅垂直方向缩放（Y轴缩放）
它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小
.conn1 {
background-color: red;
height: 100px;
width: 20%;
transform: scale(1, 2);
margin-top: 20px
}
# 3.4 skew扭曲
扭曲skew同样具有三种情况：
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
/* skewX(angle) - 沿 X 轴的 2D 倾斜 */
transform: skewX(45deg);
/* skewY(angle) - 沿 Y 轴的 2D 倾斜 */
ransform: skewY(45deg);
/* skew(angle-x, angle-y) - 沿 X Y 轴的 2D 倾斜 */
transform: skewY(45deg, 45deg);