translate 2D转换

2D 转换

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

• 移动： translate

• 旋转： rotate

• 缩放： scale

translate 语法

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

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

注意：

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

代码演示

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)
}

水平垂直居中

代码

rotate 2D旋转

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

rotate 语法

/* 单位是：deg */
transform: rotate(度数) 

注意：

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点

使用步骤：

• 给元素添加转换属性 transform。

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

代码演示

img:hover {
  transform: rotate(360deg)
}

设置元素旋转中心点(transform-origin)

transform-origin 基础语法：

transform-origin: x y;

注意：

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

旋转中心demo

代码

scale缩放

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

语法

transform: scale(x, y)

注意：

• x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

代码演示：

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

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

要点：

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

代码演示：

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