3D变换

1,左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。 这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z 轴的正方 向。如下图

2. CSS 中的 3D 坐标系 :CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X 轴旋转了 180 度，如下图

3. 左手法则 左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方 向。

4.transform变换

旋转rotateX()  rotateY()  rotateZ()

位移translateX() translateY()  translateZ()

扭曲skew() skewX()  skewY()

缩放scale()  scaleX() scaleY()

案例:

5.透视（perspective）

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D 效果），其实只是一 种视觉呈现，通过透视可以实现此目的。 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。注：并非任何 情况下需要透视效果，根据开发需要进行设置。 perspective 有两种写法 作为一个属性，设置给父元素，作用于所有 3D 转换的子元素 作为transform 属性的一个值，做用于元素自身见代码示例 3D转换-透视 perspective.html

6. 3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。 flat：所有子元素在 2D 平面呈现 preserve-3d：保留 3D 空间

案例:

综合案例:立方体

	
		
		
		
	
	
		

			
前
			
后
			
左
			
右
			
上
			
下
		
	

注:经过多次练习可以发现,属性transform:translate()和transform:rotate()书写的前后顺序不同,其表现的效果也不同.

eg::transform:translate()  rotate();

transform:rotate()  translate() ;