26、CSS3 3D转换

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

1) rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

2) rotateY() 方法
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

3) rotateZ() 方法
通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

4) CSS3 perspective 属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

例：

<html>
<head>
<title>CSS</title>
<style>
  #div1{ 
    height: 150px;
    width: 150px;
    margin: 50px;
    border: 1px solid black;
    perspective:150;
    -webkit-perspective:150; /* Safari and Chrome */
  }
  #div2{ 
    padding:30px;
    border: 1px solid black;
    background-color: yellow;
    transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">Hello</div>
</div>
</body>
</html>

据图可知，div2装有“Hello”文本，背景颜色为黄色，padding为30px表示文字内容到边框的距离有30px，border边框宽度为黑色1px实线的样式，"transform:rotateX(45deg);"表示元素绕着x轴进行了45度的旋转，3D转换中元素具有透视性：
图片说明