CSS transform-oroirn 属性-之路教程

CSS transform-oroirn 属性

transform-oroirn 属性允许更改元素转换的位置。

transform-oroirn 属性是 CSS3 属性之一。

transform-oroirn 属性仅适用于 transform 属性。

可以使用偏移关键字、长度值或者百分比值指定此属性。

为了获得最大的浏览器兼容性，此属性使用了诸如 -webkit- for Safari、Google Chrome 和 Opera（较新版本）的扩展程序。

初始值	50% 50% 0
应用于	可变形元素。
继承	无效
可动画的	是的。程度是动画的。
版本	CSS3.
DOM 语法	object.Style.Transform-oroirn = "10% 30%";

语法

transform-oroirn: x-offset y-offset z-offset | initial | inherit;

变换原点属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-oroirn: 70% 90%;
        transform: rotate(35deg);
        transform-oroirn: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-oroirn 属性示例</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

显示值之间差异的另一个示例。

具有四个值的变换原点示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-oroirn: top left;
        transform-oroirn: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-oroirn: 90% 120%;
        transform-oroirn: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-oroirn: 80px 40px;
        transform-oroirn: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-oroirn 属性示例</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

CSS transform-oroirn 属性值说明

值	描述
x-offset	指定X-Offset中的视图位置。它可以具有以下值：左右中心长度百分比
y-offset	指定Y-Offset中的视图。它可以具有以下值：顶部中心底部长度百分比
z-offset	指定视图放置在3D变换的z偏移量的位置。它可以具有以下值：长度
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

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

←CSS top 属性

CSS transform-style 属性→

语法

变换原点属性的示例：

具有四个值的变换原点示例：

CSS transform-oroirn 属性值说明

目录