---

前言

今天小谭要分享的是transform变形效果的属性以及使用方法，transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！

---

一、transform是什么？

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

 

二、transform的属性值

假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效果，从而更好的理解transform的每个属性值，盒子原生效果：

1.translate（位移）

translate有三个属性值即x轴，y轴和z轴，语法：

Transform：translateX(apx) / translateY(bpx) / translateZ(cpx);

简写：transform：translate（apx，bpx，cpx）；

X,Y,Z表示x轴y轴和z轴；abc分别表示x轴，y轴和z轴偏移数值，可以为负数；

设置translate位移的元素是相对于自己原来的位置来改变位置，不脱离文档流，translate 位移时，默认原点是元素的中心位置。

给盒子添加transform：translateX(100px);

效果：

 

给盒子添加transform：translateY(100px);

效果：

由于translateZ是沿着z轴，所以平面观察是无法看出效果的

---

2.scale（缩放）

transform：scale（1.5）；

表示元素放大1.5倍，如果要缩小0.5倍就将设为0.5即可，默认数值等于1。

也可以单独设置x轴的缩放和y轴的缩放，也可以将数值设置为负数

transform：scale（-1）；效果：

---

3.rotate（旋转）

Transform：rotateX/rotateY/rotateZ；/*rotate（旋转）*/

rotateX（30deg）表示元素沿着x轴做旋转，30deg表示要沿着x轴方向的 顺时针旋转30度，将值设为负数则是逆时针旋转30度。

---

4.其他属性及补充

transform还有其他不常使用的属性，例如skew(倾斜)，perspective（透视）等，小谭在这里就不做过多介绍了，在平时项目里使用的非常少

还有一点值得注意的是transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！

---

总结

好了，这就是小谭今天要分享的内容，小谭也只是刚刚入门的萌新选手，对于代码的理解以及书写不是很规范，有任何错误还欢迎各位大佬指点一二，小谭不胜荣幸，感谢理解，感谢包容，谢谢啦