《七》CSS3 2D 与 3D 变形

2D 变形：

CSS3 2D 变形可以对元素进行旋转，缩放，移动和倾斜。

transform 属性：

用来对元素进行 2D 变形。

语法：transform: none/变形函数;。

变形函数：

1. rotate()：旋转变形，在二维空间对指定的元素进行旋转。接受一个角度参数值，用来指定旋转角度，正数为顺时针旋转，负数为逆时针旋转。

   transform:rotate(45deg); // 顺时针旋转 45 度
   

2. scale(x, y)：缩放变形，能够缩放元素大小。接受两个没有单位的正数参数值，分别用来定义宽和高的缩放比例。当参数小于 1 时，表示缩小元素；当参数大于 1 时，表示放大元素。
   scaleX()：定义 2D 缩放，x 轴方向缩放元素大小。包含一个参数，用来定义宽的缩放比例。
   scaleY()：定义 2D 缩放，y 轴方向缩放元素大小。包含一个参数，用来定义高的缩放比例。

   transform:rotate(25deg) scale(.8, .8); // 可以同时设置多个变形函数
   

3. translate(x, y)：移动变形，能够移动元素。接受两个以 px 为单位的参数值，以元素中心点为参考点，分别用来定义 x 轴和 y 轴坐标，参数值可以是负数。
   translateX()：定义 2D 移动，沿着 x 轴移动元素。
   translateY()：定义 2D 移动，沿着 y 轴移动元素。

   位移变形和相对定位相似，移动之后会覆盖其他元素，仍然会占据原本所在的空间。

4. skew()：倾斜变形，能够让元素倾斜显示。接受两个角度参数值，分别用来定义 x 轴和 y 轴坐标的倾斜角度。
   skewX()：定义 2D 倾斜，只在 x 轴方向倾斜。
   skewY()：定义 2D 倾斜，只在 y 轴方向倾斜。

    transform: skew(25deg, 50deg);
   

transform-origin 属性：

用来设置变形的原点，即在对元素进行变形的时候，是围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即元素 x 轴和 y 轴的 50% 处。

语法：transform-origin:x-axis y-axis z-xis;。

属性值：

1. x-axis：定义视图被置于 x 轴的何处。值为 left、center、right、px、%。
2. y-axis：定义视图被置于 y 轴的何处。值为 left、center、right、px、%。

transform-origin: 0 0; //  围绕左上角进行变换

3D 变形：

perspective 属性：

用来定义透视强度，单位是 px。可以理解为 “人眼到画面的距离”，离眼球越近，看到的事物越大。

要进行 3D 变形的元素的父盒子必须定义此属性。

transform 属性：

用来对元素进行 3D 变形。

语法：transform: 变形函数;。

变形函数：

1. 3D 旋转：

   • rotateX()：定义 3D 旋转，绕 x 轴旋转。正数表示向后仰，负数表示向前倒。

   • rotateY()：定义 3D 旋转，绕 y 轴旋转。正数表示向右旋转，负数表示向左旋转。

   • rotateZ()：定义 3D 旋转，绕 z 轴旋转。

     z 轴就是从浏览器屏幕穿出来的轴。rotateZ() 的效果和 rotate() 平面旋转的效果一样。

     一旦元素旋转了，那么它的坐标系也就旋转了。也就是说，如果让一个元素 rotateX(90deg) 旋转朝上，那么它的坐标系也就跟着旋转了，如果此时想让这个元素向上移动 100px，那么需要使用 translateZ(100px)。

2. 3D 缩放：

   • sacleX()：定义 3D 缩放，沿着 x 轴缩放元素。
   • sacleY()：定义 3D 缩放，沿着 y 轴缩放元素。
   • sacleZ()：定义 3D 缩放，沿着 z 轴缩放元素。

3. 3D 移动：

   • translateX()：定义 3D 移动，沿着 x 轴移动元素。
   • translateY()：定义 3D 移动，沿着 y 轴移动元素。
   • translateZ()：定义 3D 移动，沿着 z 轴移动元素。

.box1 {
	width: 200px;
	height: 200px;
	border: 1px solid #000;
	perspective: 300px; // 父盒子必须设置 perspective 属性
}
.box2 {
	width: 200px;
	height: 200px;
	background: red;
	transform: rotateX(30deg);
}
	
<div class="box1">
	<div class="box2"></div>
</div>	

transform-origin 属性：

用来设置变形的原点，即在对元素进行变形的时候，是围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即元素 x 轴和 y 轴的 50%、z 轴的 0% 处。

语法：transform-origin:x-axis y-axis z-xis;。

属性值：

1. x-axis：定义视图被置于 x 轴的何处。值为 left、center、right、px、%。
2. y-axis：定义视图被置于 y 轴的何处。值为 left、center、right、px、%。
3. z-axis：定义视图被置于 z 轴的何处。值为 px。

transform-origin: 0 0; //  围绕左上角进行变换

transform-style 属性：

用来设置被嵌套元素如何显示。

属性值：

1. preserve-3d：所有子元素在 3D 空间呈现。
2. flat：所有子元素在 2D 平面呈现。