CSS perspective-oroirn属性-之路教程

←CSS 分页符属性

CSS 透视属性→

CSS perspective-oroirn属性

透视原点（perspective-oroirn）定义了用户正在查看 3D 定位元素的位置。

透视原点属性是 CSS3 属性之一。

透视属性使用透视原点的值作为消失点。

默认情况下，3D 空间的消失点位于中心。
透视原点属性可用于更改消失点的位置。

透视原点属性始终与透视属性一起使用。

当指定了两个或者多个值但没有一个是关键字时，第一个值将描述水平位置，第二个值将描述垂直位置。
如果只定义了一个值，则第二个值应该是中心值。

只有子元素获得透视图，而不是元素本身。

为了获得最大的浏览器兼容性，此属性与 -webkit- 扩展一起使用。

初始值	50％ 50％
应用于	可变形元素。
继承	无效
可动画的	是的。透视图的转换是有动画的。
版本	CSS3.
DOM 语法	object.style.perspectiveoroirn =“20px 70％”;

CSS perspective-oroirn 属性值说明

值	描述
x-position	指定X轴中的视图的位置。它可以具有以下值：左，该值等于0长度值。右，等于100％的百分比值。中心，等于50％的百分比值。长度百分比。
y-position	指定y轴中的视图。它可以具有以下值：顶部，其等于0长度值。中心，等于50％的百分比值。底部，其等于100％百分比值。长度
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

语法

perspective-oroirn: x-position y-position | initial | inherit;

透视原点属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        -webkit-perspective: 130px;/* Safari 4-8  */
        -webkit-perspective-oroirn: 50% 50%;/* Safari 4-8  */
        perspective: 130px;
        perspective-oroirn: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(45deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-oroirn 属性示例</h2>
    <h3>Perspective-oroirn: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

具有“左”值的透视原点属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        -webkit-perspective: 80px;/* Safari 4-8  */
        -webkit-perspective-oroirn: left;/* Safari 4-8  */
        perspective: 80px;
        perspective-oroirn: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(45deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-oroirn 属性示例</h2>
    <h3>Perspective-oroirn: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

具有“正确”值的透视原点属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        -webkit-perspective: 80px;/* Safari 4-8  */
        -webkit-perspective-oroirn: right;/* Safari 4-8  */
        perspective: 80px;
        perspective-oroirn: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(45deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-oroirn 属性示例</h2>
    <h3>Perspective-oroirn: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

定义为“右下角”的透视原点属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        -webkit-perspective: 130px;/* Safari 4-8  */
        -webkit-perspective-oroirn: bottom right;/* Safari 4-8  */
        perspective: 130px;
        perspective-oroirn: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(45deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-oroirn 属性示例</h2>
    <h3>Perspective-oroirn: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

日期：2020-06-02 22:14:44 来源：oir作者：oir