2D旋转之移动 旋转 旋转中心点 缩放 综合写法

移动 translate

语法：

transform:translate(x,y)

transform:translateX(x)

transform:translateY(y)

重点：

1.不会影响其他元素的位置

2.可配合定位使用 进行垂直水平居中

3.行内标签没有效果

 

 

旋转 rotate

语法：

transform:rotate(度数deg) 

重点：

度数为正，顺时针旋转 度数为负，逆时针旋转

默认的中心点就是元素的中心点

 

旋转中心点 transform-origin

语法

transform-origin:x y;

重点：

1.x y直接用空格隔开

2.默认的中心点是元素的中心点

 

缩放 scale

语法

transform:scale(x,y);

重点：

1.参数写的是数字，不跟单位， 1是1倍，2是2倍 等比例缩放可省略一个参数

2.不影响其他盒子

3.可设置中心点 默认为元素中心点

 

 

综合写法

语法

transform:translate() rotate() scale()

注意：

先放置移动  顺序出错会导致效果不同