阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS3 3D 转换

      CSS3 3D 转换


      3D 转换

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

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

      • rotateX()
      • rotateY()

      浏览器支持

      表格中的数字表示支持该属性的第一个浏览器版本号。

      紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

      属性IEChromeFFsafariOpen
      transform36.0
      12.0 -webkit-
      10.016.0
      10.0 -moz-
      4.0 -webkit-23.0
      15.0 -webkit-
      transform-origin
      (three-value syntax)
      36.0
      12.0 -webkit-
      10.016.0
      10.0-moz-
      4.0 -webkit-23.0
      15.0 -webkit-
      transform-style36.0
      12.0 -webkit-
      11.016.0
      10.0 -moz-
      4.0 -webkit-23.0
      15.0 -webkit-
      perspective36.0
      12.0 -webkit-
      10.016.0
      10.0 -moz-
      4.0 -webkit-23.0
      15.0 -webkit-
      perspective-origin36.0
      12.0 -webkit-
      10.016.0
      10.0 -moz-
      4.0 -webkit-23.0
      15.0 -webkit-
      backface-visibility36.0
      12.0 -webkit-
      10.016.0
      10.0 -moz-
      4.0 -webkit-23.0
      15.0 -webkit-

      rotateX() 方法

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

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

      rotateY() 方法

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

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

      转换属性

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

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

      3D 转换方法

      函数描述
      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 转换元素的透视视图。
      目录
      目录