阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS3 perspective-origin

      CSS3 perspective-origin

      设置一个3D元素的基数位置:

      div {
          perspective:150;
          perspective-origin: 10% 10%;
          -webkit-perspective:150; /* Safari and Chrome */
          -webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
      }
      

      浏览器支持

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

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

      属性IEChromeFFsafariOpen
      perspective-origin36.0
      12.0 -webkit-
      10.016.0
      10.0 -moz-
      9.0
      4.0.3 -webkit-
      23.0
      15.0 -webkit-

      属性定义及使用说明

      perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

      定义时的perspective -Origin属性,它是一个元素的子元素,透视图,而不是元素本身。

      注意: 对于Chrome和Safari用户:为了更好地理解perspective属性!

      对于 Chrome 和 Safari 用户: 为了更好地理解perspective-Origin属性,请查看 查看实例.

      column0column1
      默认值:50% 50%
      继承:no
      版本:CSS3
      JavaScript 语法:object.style.perspectiveOrigin=“10% 10%”

      语法

      perspective-origin: x-axis y-axis;
      
      描述
      x-axis定义该视图在 x 轴上的位置。默认值:50%。
      可能的值:
      left
      center
      right
      length
      %
      y-axis定义该视图在 y 轴上的位置。默认值:50%。
      可能的值:
      top
      center
      bottom
      length
      %
      目录
      目录