html：对于2d转换的初步认知+小盒子旋转的hover效果实现

今天带大家了解一下2d转换这个这个知识点，我是在无意中发现的，感觉是一个比较有趣的知识点，在配合transition和hover后。

目录

transform属性

1、translate（）

2、rotate（）

3、scale（）

4、skew（）

5、matrix（）

补充：小盒子旋转的hover效果实现

---

transform属性

关于2d转换方面主要就是了解一下transform属性和它的几个可选值。

1、translate（）

如下：表示的是将元素从当前位置向右移50像素，向下移100像素

transform: translate(50px,100px);

2、rotate（）

如下：是将元素顺时针旋转360度

transform: rotate(360deg);

3、scale（）

如下：将元素宽度增大2倍，高度增加3倍。

transform: scale(2,3);

如下：将元素宽度减小一半，高度减小一半。

 transform: scale(0.5,0.5);

补充：scalex（）改变宽度