19.transform-2D 有趣的2D变换 #css

有趣的 2D 变换。

讲讲 transform。transform 属性主要用于元素的 2D 和 3D 变换，能让元素进行旋转、缩放、移动和倾斜。其参数主要有：transform 用于旋转，translate 用于移动，skill 用于放大和缩小。

1. 第一个属性：transform 设置为十五，相当于灰色图是旋转后的图片，原图是未旋转前的，相对原图实际旋转了十五度。若用 trace later 可看到相对原图横向移动了五十像素，竖向移动了十像素。若同时写 translate 和 root rotate，比如第一个不用 ps 而用百分之五十，实际是横向移动了百分之五十，图像应在这，然后向下移动 ps，且又做了十五度倾斜，图像就变成这样。

2. 第二个属性：scale，第一个相当于扩大和缩小，大于一就放大，小于一就缩小，为一肯定大小相同。第一个是一点五，相当于把宽度放大一点五倍。第二个是零点五，相当于把高度缩小一半，最终形成图片，这是一个不在 2D 图像的应用。