CSS3 3D转换

浏览数：18 / 时间：2015年06月09日

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

3D转换方法：

  • rotateX()
  • rotateY()

浏览器支持

属性 浏览器支持
transform          

IE10和Firefox支持3D转换。

Chrome和Safari需要前缀-webkit-.

Operate仍然不支持3D转换。

1.rotateX()方法

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

        div.rotateXTwo {
            background-color: red;
            transform: rotateX(120deg);
        }

2.rotateY()旋转

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

        div.rotateYTwo {
            transform: rotateY(130deg);
            background-color: red;
        }

转换属性

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

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

2D Transform 方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 3D转换,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： http color it class word top 表 blog gb la int http color it class word top 表 blog gb la int

相关文章

随机文章

您可能还喜欢

您可能还喜欢