2D转换

1. 2D 转换

• 2D 转换是改变标签在二维平面上的位置和形状

• 转换（transform）是CSS3中具备颠覆性的特征之一，能够实现元素的位移、旋转、变形、缩放。

  • 移动： translate

  • 旋转： rotate

  • 缩放： scale

  • 倾斜：skew

1.1.二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

2. 2D 转换之 translate

2D移动是2D转换里面的一种功能，能够改变元素在页面中的位置，相似定位。

2.1. translate 语法

• x 就是 x 轴上水平移动
• y 就是 y 轴上水平移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
复制代码

2.2. 重点知识点

• 2D 的移动主要是指 水平、垂直方向上的移动
• translate 最大的优势就是不影响其余元素的位置
• translate 中的100%单位，是相对于自己的宽度和高度来进行计算的
• 行内标签没有效果

2.3. 代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}
复制代码

3.2D 转换 rotate

3.1. rotate 旋转

• 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

3.2. rotate 语法

使用步骤：

• 给元素添加转换属性 transform

• 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

  /* 单位是：deg */
  transform: rotate(度数) 
  复制代码

3.3. 重点知识点

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点
• 经过左手法则，大拇指朝正轴方向，判断正反方向

3.4.设置旋转中心点

3.4.1.transform-origin 基础语法

/* 设置旋转中心点*/
transform-origin: x y;
复制代码

3.4.2.重要知识点

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
• 还能够给 x y 设置像素或者方位名词(top、bottom、left、right、center)

3.5. 代码演示

img:hover {
  transform: rotate(360deg)
}
复制代码

3.6.css3三角

• 实现三角的方式有不少种：例如图标、文字符号、边框加旋转、纯边框…
• 平常开发中，最经常使用的是图标方式，最不常使用文字符号实现

4.2D 转换之 scale

4.1. scale 的做用

• 用来控制元素的放大与缩小

4.2. 语法

transform: scale(x, y)
复制代码

4.3. 知识要点

• 注意，x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍，至关于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 若是只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优点：能够设置转换中心点缩放，默认以中心点缩放，并且不影响其余盒子

4.4. 代码演示

div:hover {
	   /* 注意，数字是倍数的含义，因此不须要加单位 */
	   /* transform: scale(2, 2) */
   
	   /* 实现等比缩放，同时修改宽与高 */
	   /* transform: scale(2) */
   
	   /* 小于 1 就等于缩放*/
	   transform: scale(0.5, 0.5)
   }
复制代码

5. 2D 转换综合写法以及顺序问题

5.1. 知识要点

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()
• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 但咱们同时有位置或者其余属性的时候，要将位移放到最前面

5.2. 代码演示

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
复制代码