你不知道的2D和3D

2D和3D

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

一、2D转换

1、移动：translate

概述
2D 转换是改变标签在二维平面上的位置和形状。其中包括：移动： translate；旋转：rotate； 缩放： scale。
语法

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

2、旋转：rotate

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

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

使用步骤

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

元素旋转中心点：transform-origin

1. transform-origin 基础语法：transform-origin: x y;
2. 注意事项：
   • 注意后面的参数 x 和 y 用空格隔开
   • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
   • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

要点

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

代码示例

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

旋转中心案例

div {
		overflow: hidden;
		width: 200px;
		height: 200px;
		border: 1px solid pink;
		margin: 10px;
		float: left;
}

div::before {
		content: "卧槽，无情";
		display: block;
		width: 100%;
		height: 100%;
		background-color: hotpink;
		transform: rotate(180deg);
		transform-origin: left bottom;
		transition: all 0.4s;
}
/* 鼠标经过div 里面的before 复原 */

div:hover::before {
		transform: rotate(0deg);
}
<div></div>
<div></div>
<div></div>

3、缩放：scale

概述
2D缩放指用来控制元素的放大与缩小。
语法

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

4、转换综合写法以及顺序问题

要点

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

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

二、3D 转换

特点

• 近大远小
• 物体和面遮挡不可见

三维坐标系

• x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
• y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
• z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值
  要点
• 3D 位移：translate3d(x, y, z)
• 3D 旋转：rotate3d(x, y, z)
• 透视：perspctive
• 3D呈现 transfrom-style

3D 移动 translate3d

• 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
• transform: translateX(100px)：仅仅是在 x 轴上移动
• transform: translateY(100px)：仅仅是在 y 轴上移动
• transform: translateZ(100px)：仅仅是在 z 轴上移动
• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
• 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

语法

 transform: translate3d(x, y, z)

代码示例

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)