CSS3:CSS3 3D 转换

3D 转换

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

在本章中,您将学到其中的一些 3D 转换方法:

  1. rotateX()
  2. rotateY()

点击右侧的元素,来查看 2D 转换与 3D 转换之间的不同之处:

它如何工作?

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换(它只支持 2D 转换)。

rotateX() 方法

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

示例:
div
{
   transform: rotateX(120deg);
   -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
   -moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY() 旋转

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

实例
div
{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
  -moz-transform: rotateY(130deg);    /* Firefox */
}

转换属性

下面的表格列出了所有的转换属性:

2D Transform 方法

全部评论(1)
小问
留一下你们的联系方式,方便私下交流
点赞
回复