一、transform概述
1、Transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等。 2、语法
transform: none|transform-functions; transform-origin:(x[,y])二、transform-functions
值描述none定义不进行转换translate(x,y)定义 2D 转换translate3d(x,y,z)定义 3D 转换translateX(x)定义转换，只是用 X 轴的值translateY(y)定义转换，只是用 Y 轴的值translateZ(z)定义 3D 转换，只是用 Z 轴的值scale(x[,y]?)定义 2D 缩放转换scale3d(x,y,z)定义 3D 缩放转换scaleX(x)通过设置 X 轴的值来定义缩放转换scaleY(y)通过设置 Y 轴的值来定义缩放转换scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换rotate(angle)定义 2D 旋转，在参数中规定角度rotate3d(x,y,z,angle)定义 3D 旋转rotateX(angle)定义沿着 X 轴的 3D 旋转rotateY(angle)定义沿着 Y 轴的 3D 旋转rotateZ(angle)定义沿着 Z 轴的 3D 旋转skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换skewX(angle)定义沿着 X 轴的 2D 倾斜转换skewY(angle)定义沿着 Y 轴的 2D 倾斜转换perspective(n)为 3D 转换元素定义透视视图三、transform-origin元素基点
主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。写法：
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%（默认值） 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%