11.2D转换

优点

无论什么类型的转换完全不会影响其它的布局结构，

对行内标签没有效果

2D坐标

x向右为正，y向下为正

位移translate

移动语法

语法1：

transform:translate(x,y);transform:translate(50%,30%);transform:translate(200px,150px);

这里的百分比是相对于元素自身的长度

语法2：

transform:translateX(30px);transform:translateY(30px);

旋转rotate

旋转中心transform-origin

首先默认的旋转中心是元素的中心

所以默认值是

transform-origin：50% 50%

这里的值可以是px,%,还有几个默认方位词top bottom left right center

比如设置左上为中心

transform-origin:left top;

语法

transform:rotate(90deg)

deg表示度，正数是顺时针，负数反之

缩放scale

重心设置和上面一样

语法

transform:scale(2,2);transform:scale(2);

里面的数值是x,y 的倍数，这真的没啥好讲的、

扭曲skew

skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

transform:skew(30deg,30deg);transform:skewX(30deg);transform:skewY(45deg);

这3种都可以

综合写法

 transform: translate(150px,150px) rotate(360deg) scale(1.5);

唯一需要注意的是：必须位移放在第一个，不然失效