CSS3 允许您使用 3D 转换来对元素进行格式化

那么下面我们一起看一下2D和3D有什么不同： 
[请用鼠标放到下面两个盒子上，查看效果] 
/* 

.dd{ 
width:200px; 
height:200px; 
display:inline-block; 
border:1px solid yellow; 
background:red; 
} 
div-2d:hover{ 
transform: rotate(360deg); 
} 
div-3d:hover{ 
transform: rotateY(360deg); 
} 

*/

浏览器支持

rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

3D 转换方法