【css3】3D转换，旋转

translate3D()，3D转换

	// 对元素进行3D转换需要使用 translate3D
	transform: translate3D(x,y,z);
	// 等同于
	transform: translateX() translateY() translateZ();

• 相对2D转换多了 Z轴的变化，但是目前看不出来，因为没用加perspective属性，也就是透视效果
• translateZ() 常使用px作为单位
• translateZ() 值的正负，代表 元素距离人眼的距离，正方向越大，距离人眼越近

---

perspective，透视属性

	//单位是px
	perspective: 500px;

• 单位使用px
• perspective 属性要被写在需要透视效果元素的父元素上

	<div class="father">
		// 如果span需要实现透视想。则要在 div的css中写入perspective属性
		<span class="son"></span>
	</div>

• perspective 的值为 视距 即眼睛到元素的距离，距离越近，元素越大

---

rotate3D，3D旋转

	transform: rotate3D(x,y,z,45deg);
	// 等同于下面这些写法
	transform: rotateX(45deg);
	transform: rotateY(45deg);
	transform: rotateZ(45deg);

• rotateX, Y, Z 即围绕相应的轴进行旋转，值为旋转的 度数，单位为 deg
• rotate3D() 中，xyz的取值为 1或0，代表是否绕该轴进行旋转，最后的值为旋转的读书，单位为 deg
• rotate3D() 中 可以同时设置 1-2个轴进行旋转，方向取向量和

• 取值的正负代表了旋转的角度，
• 判断正方形可采用左手法则

左手拇指指向坐标轴正方向
其余手指收拢的方向即为旋转正方向

• 网页中Y轴正方向为向下，z轴为指向屏幕外

• transform-origin可以设置旋转中心点

• 值为 x y 的坐标，以自身为坐标轴进行设置
• 设置元素左上角为旋转中心
  transform-origin: 0 0;

---

transform-style，保持子元素3D效果

	// 默认为 flat
	transform-style: preserve-3d;

• 默认情况下，如果父元素进行3D转换，子元素会失去3D效果
• 此属性应该使用在父元素中，以保持子元素的3D效果

子元素在父元素中绕x轴旋转45deg

未设置 transform-style 时，父元素绕y轴旋转45deg

设置transform-style: preserve-3d;后效果