文章目录transform具体每个属性的用法1、旋转：rotate2、移动：translate3、缩放：scale4、倾斜：skew5、透视：perspectiveCSS中transform 属性允许你修改CSS可视化模型的坐标空间，向元素应用 2D 或 3D 转换。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）、透视（perspective）。
transform的属性如下：
注：以上值的参数单位都为角度值 deg
下面我们来具体举例，详细了解这个属性和作用：
① transform: rotate(number+deg)
对于平面上的旋转，大家在日常生活中常常看到。 如：转动的风车，摆动的卡牌...等等。
旋转或是转动 就有两个基本属性：一 是旋转幅度(角度值)；二 是旋转的方向(逆时针还是顺时针)。
我们用实例来得到答案：
设计案例：给元素四个边设置不同颜色的边框。通过谷歌浏览器 F12 调整参数的不断变化来观察旋转的规律。
.box { margin: 100px; width: 80px; height: 80px; background: red;/* 给边框设置不同颜色 */ border-top: 8px solid green; border-right: 8px solid cyan; border-bottom: 8px solid orange; border-left: 8px solid black; /* 从临界点开始变换参数数值 */ transform: rotate(0deg) ;效果：
从上面的动图可以得出：
参数为 正值 的时候，元素旋转的方向是 顺时针，当参数值为 负值 的时候，旋转的方向是 逆时针。可以总结为：正顺负逆
② transform: roteta3d(x,y,z,angle)
了解它之前我们先把 rotateX(angle),rotateY(angle),rotateZ(angle)给弄清楚，这里的x,y,z 就是 旋转轴:元素旋转所依据的基线，通常在元素几何上的中心。
先看 rotetaX(angle) X为横轴，它的位置在 元素的中线
.rotateX { width: 200px; height: 200px; background: red; margin: 200px; text-align: center; color: #fff; transform: rotateX(0deg) /* 从初始值开始变换 */效果：
同样的案例设计对于: transform: rotateY(angle)
效果：
再来看 transform: rotateZ(angle)
效果：
如果对于Z轴 指向 还不清楚 可以参看 这张图..
经过上面三个小分支. 现在来正式了解下: tranform: rotate3d(x,y,z,angel)
前面的 x,y,z 相当于:
.rotate3d { /* 元素围绕x,y,z轴旋转 */ transform: rotate3d(x,y,z,angle); /* 元素围绕X轴旋转 */ transform: rotateX(angle) transform: rotate3d(1,0,0,angle); /* 元素围绕Y轴旋转 */ transform: rotateY(angle) transform: rotate3d(0,1,0,angle); /* 元素围绕Z轴旋转 */ transform: rotateZ(angle) transform: rotate3d(0,0,1,angle);我们来设计一个案例：固定x,y,z轴，让旋转 角度 不断变换。如下：
.rotate3d { width: 200px; height: 200px; background: red url('图片地址') center center no-repeat; background-size: 100% 100%; margin: 200px; color: #fff; /* 固定常量.控制变量方法 */ transform: rotate3d(1,1,1,0deg);效果：
我们看到图片的旋转，有是 深度 的变化产生，这就是rotate3d的效果。
2、移动：translatetranslate定义元素的移动变换，同样遵循 三维坐标系: x,y,z 轴上的移动
① transform: translate(x,y) 元素沿x,y的偏移量，偏移单位是像素px
实例：
.begin { /* margin: 20px; */ width: 100px; height: 100px; background: #ddd;.begin::after { content: "移动后的位置"; display: block; position: absolute; top: 0; bottom: 0; width: 100px; height: 100px; background: red; /* X轴,Y轴各偏移150px */ transform: translate(150px, 150px);效果：
transform: translate3d(x,y,z) 单位为px
translate3d 与 rotate3d 一样，在多了一个Z轴后，就有了深度 的 位移效果了。
实例：
!-- html --> div > div > /div> /div>/* css */.box { perspective: 500; /* 给父容器一个透视距离,里面的子元素才会有透视效果 */ -webkit-perspective: 500; .translate3d { margin: 100px 0 0 100px; width: 200px; height: 200px; background-image: url('图片地址'); background-size: cover; transform: rotateY(0deg) translate3d(50px,50px,50px);效果：
从上面效果来看，每次改变x,y,z的数值时，它都沿着所在轴线来移动。
3、缩放：scale01 放大。当为负值的时候，表示反向放大或缩小。同样 scale 同样 分为 平面和三维 两个维度。
首先来理解下 平面上的 放大缩小 tranform: scale(x,y);
具体怎么表现呢? 请看下面案例
.begin { margin: 200px; width: 200px; height: 200px; background: red;.begin::after { content: "变换后的大小"; width: 200px; height: 200px; position: absolute; left: 200px; background: green; opacity: .5; /* X轴方向缩小0.5, Y轴方向放大1.5 */ transform: scale(.5,1.5)效果：
再来看 tranform: scale3d(x,y,z)
这里的z同样是指向我们观察者的眼睛的那根 轴
我们来设计一个实例来感受一下:
!-- html --> div > div >scale3d /div> /div>/* css */.box { perspective: 500; -webkit-perspective: 500; margin: 200px;.box .scale3d { width: 200px; height: 200px; background: red; /* rotateY(45deg) */ transform: rotateY(45deg) scale3d(1,1,2);效果：
为什么改变z的数值，没有什么变化呢？
4、倾斜：skewtransform: skew(angle) 可以 倾斜 元素 x,y 轴上的角度
效果：
得出结论: 角度正值时，向逆时针倾斜；角度为负值时，向顺时针倾斜。元素的几何中心点不移动不变化。
再来看 skewY(angle)
.skewY { margin: 200px; width: 200px; height: 200px; background: red; transform: skewY(10deg);效果：
再来看 transform: skew(x,y)
.skewXY { margin: 200px; width: 200px; height: 200px; background: red; transform: skew(10deg,10deg);效果：
定义：该属性允许您改变 3D 元素查看 3D 元素的视图。
用法：transform: perspective(number+px), number 值越小，透视效果越明显。
注意：
①: perspective 要放在 transform 其他属性的前面，否则不会产生效果。 ② 一般加上-webkit-transform，兼容性更好。实例：
.perspective { margin: 200px; width: 200px; height: 200px; background: red;/* perspective要放在 rotate的前面才会产生效果 */ transform: perspective(300px) rotateY(40deg); -webkit-transform: perspective(300px) rotateY(40deg);效果：
