CSS transform-origin-Eigenschaft

Die transform-origin-Eigenschaft ermöglicht es Ihnen, den Ursprung der Transformation eines Elements zu ändern.

Die transform-origin-Eigenschaft ist eine der CSS3-Eigenschaften.

Die transform-origin-Eigenschaft wirkt nur, wenn eine Transformationsfunktion über die transform-Eigenschaft auf das Element angewendet wird.

Diese Eigenschaft kann mit Offset-Schlüsselwörtern, Längenwerten oder Prozentwerten angegeben werden.

INFO

Historisch gesehen wurde das -webkit--Präfix für Safari, Chrome und ältere Opera-Versionen verwendet. Moderne Browser benötigen für diese Eigenschaft keine Vendor-Präfixe mehr.

Anfangswert	50% 50% 0
Anwendbar auf	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja. Der Winkel ist animierbar.
Version	CSS3
DOM-Syntax	Object.style.transform-origin = "10% 30%";

Syntax

CSS transform-origin-Werte

css

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

Beispiel zur transform-origin-Eigenschaft:

CSS transform-origin-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS transform-origin

Ein weiteres Beispiel, das den Unterschied zwischen den Werten zeigt.

Beispiel für transform-origin mit vier Werten:

CSS transform-origin weiteres Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</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>

Try it Yourself »

Werte

Wert	Beschreibung
`x-offset`	Gibt die horizontale Position an. Akzeptiert Schlüsselwörter (`left`, `center`, `right`), Längen oder Prozentsätze.
`y-offset`	Gibt die vertikale Position an. Akzeptiert Schlüsselwörter (`top`, `center`, `bottom`), Längen oder Prozentsätze.
`z-offset`	Gibt die Tiefenposition entlang der z-Achse für 3D-Transformationen an. Akzeptiert Längenwerte.
`initial`	Setzt diese Eigenschaft auf ihren Standardwert zurück.
`inherit`	Erbt diese Eigenschaft von ihrem übergeordneten Element.

Practice

Die transform-origin-Eigenschaft funktioniert nur mit

animierbaren Elementen.transformierbaren Elementen.positionierten Elementen.

CSS transform-origin-Eigenschaft ​

Syntax ​

Beispiel zur transform-origin-Eigenschaft: ​

Ergebnis ​

Beispiel für transform-origin mit vier Werten: ​

Werte ​