CSS3中的3D变换

3D变换

1. 属性设置：
   
2. 旋转的三个方向，沿着三个轴旋转实现3D的变换，也可以设置透视效果。
   沿着x轴的旋转类似于平面的移动，y轴的旋转类似于芭蕾舞移动，z轴方向类似于翻跟头的动作。
3. 二维变换没有透视效果，三维变换有透视效果，
   没有透视三个轴上的旋转效果：
   有透视的时候的旋转效果，有透视的时候存在近大远小的效果，右边为透视效果，左边无透视效果：
   
4. 需要存在父容器来进行旋转，舞台来形成透视关系。
   属性设置：
   父容器：transform-style：preserve-3d;transform:rotate Y(60deg);
   舞台：perspective：100px（眼睛到舞台的距离）。
5. 具体代码：
   .html文件：

.box{/*HTML文件中的设置*/
			width:100px;
			height:100px;
			float:left;
			transition:linear 1s;
			transform-style: preserve-d;
		}/*box的设置*/
		img{
			width:100px;
			height:75px;
		}/*父容器的大小*/
		.x:hover
		{
			transform: rotateX(60deg);
		}/*鼠标悬停的时候x轴旋转60度*/
		.y:hover
		{
			transform: rotateX(60deg);
		}
		.z:hover
		{
			transform: rotateX(60deg);
		}

    <div id="stage">/*调用style.css格式中的舞台stage*/
	<div class="box x"><img src="picture/music1.jpg"></div>
	<div class="box y"><img src="picture/music2.jpg"></div>
	<div class="box z"><img src="picture/music3.jpg"></div>
</div>

.css文件：

#stage{
	width:300px;
	margin:100px auto;
    perspective: 100px;
}

6. 旋转的动画效果：