03.css提高-css2d转换

文章目录

一. css2d转换：transform 转换：实现元素的转移、旋转和缩放

1. 2d转换之偏移

2. 2d转换之旋转

3. 2d转换之修改旋转中心

4. 2d转换之缩放

5. 多个2d样式，可以整合写法

---

一. css2d转换：transform 转换：实现元素的转移、旋转和缩放

1. 2d转换之偏移

语法：

transform: translate(x,y)  // 沿着x轴和y轴移动位置

transform: translateX(n); //沿着x轴移动

transform: translateY(n); //沿着y轴移动

注意：

1、最大的优点：不会影响其他元素的位置

2、对行内标签没有效果

3、translate中百分比单位是相对于自身元素的translate:(50%,50%)

---

2. 2d转换之旋转

语法：

transform: rotate(度数)

transform: rotateX(deg) //沿着X轴旋转

transform: rotateY(deg) // 沿着Y轴旋转

注意：

1、rotate里面是度数，单位deg，比如rotate(45deg)

2、角度为正时，顺时针；负时，为逆时针

3、默认旋转的中心点是元素的中心点

---

3. 2d转换之修改旋转中心

语法：

transform-origin: x y;

注意：

1、x和y是用空格隔开

2、x 、y默认旋转的中心点是元素的中心点（50% 50%）

3、还可以给x、y设置像素或者方位名词 （top 、bottom、left、right、center）

---

4. 2d转换之缩放

语法：

transform: scale(x,y)

注意：

1、x和y是用逗号隔开

2、放大缩小不会影响其他盒子

3、默认的缩放中心点是盒子的中心点

4、x和y是不带单位，是数字，2就是放大2倍，0.5就是缩放0.5倍

---

5. 多个2d样式，可以整合写法

语法：

transform: translate(x,y) rotate(deg) scale(x,y)

注意：当同时有位移和其他属性时，需要把位移放在最前面