diff options
Diffstat (limited to 'files/de/web/css/transform-origin/index.html')
| -rw-r--r-- | files/de/web/css/transform-origin/index.html | 692 |
1 files changed, 692 insertions, 0 deletions
diff --git a/files/de/web/css/transform-origin/index.html b/files/de/web/css/transform-origin/index.html new file mode 100644 index 0000000000..83f8a833ed --- /dev/null +++ b/files/de/web/css/transform-origin/index.html @@ -0,0 +1,692 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten +translation_of: Web/CSS/transform-origin +--- +<div>{{ CSSRef("CSS Transforms") }}</div> + +<p>Die CSS-Eigenschaft <strong><code>transform-origin</code></strong> legt den Ankerpunkt für die Transformationen eines Elements fest.</p> + +<pre class="brush: css no-line-numbers">/* One-value syntax */ +transform-origin: 2px<em>;</em> +transform-origin: bottom; + +/* x-offset y-offset */ +transform-origin: 3cm 2px; + +/* x-offset-keyword y-offset */ +transform-origin: left 2px; + +/* x-offset-keyword y-offset-keyword */ +transform-origin: right top; + +/* y-offset-keyword x-offset-keyword */ +transform-origin: top right; + +/* x-offset y-offset z-offset */ +transform-origin: 2px 30% 10px; + +/* x-offset-keyword y-offset z-offset */ +transform-origin: left 5px -3px; + +/* x-offset-keyword y-offset-keyword z-offset */ +transform-origin: right bottom 2cm; + +/* y-offset-keyword x-offset-keyword z-offset */ +transform-origin: bottom right 2cm; + +/* Global values */ +transform-origin: inherit; +transform-origin: initial; +transform-origin: unset; +</pre> + +<div class="hidden" id="transform-origin"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="row"> + <div class="cell"> + rotate(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d2"></div> + </div> + </div> + </div> + <div class="cell"> + rotatex(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3x"></div> + </div> + </div> + </div> + <div class="cell"> + rotatey(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3y"></div> + </div> + </div> + </div> + <div class="cell"> + rotatez(<span class="angle">-120</span>deg); + <div class="border"> + <div class="content"> + <div class="center"></div> + <div class="tr d3z"></div> + </div> + </div> + </div> + </div> + <div class="cell note"> + transform-origin: <input type="text" value="30% top -20px"> (<i>rotate by <input type="number" min="-360" max="360" value="-120"> deg</i>) + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: 0 .5em .5em; + font: .8em sans-serif; + text-align: center; + flex: none; +} + +input[type=number] { + width: 3rem; +} + +.border { + width : 140px; + height: 140px; + border: 1px solid #E4F0F5; + margin: .5rem auto; + overflow: hidden; +} + +.content { + width : 50px; + height: 50px; + margin: 44px; + border: 1px dotted hsla(0, 100%, 50%, .5); + position: relative; +} + +.center { + position: absolute; + width : 5px; + height: 5px; + border-radius: 100%; + background: red; + top : 50%; + left: 50%; + transform: translate(-3px, -3px); + z-index: 1; +} + +.center:before { + content: ''; + position: absolute; + left : 2px; + right : 2px; + top : -6px; + bottom: -6px; + background: red; +} + +.center:after { + content: ''; + position: absolute; + left : -6px; + right : -6px; + top : 2px; + bottom: 2px; + background: red; +} + +.tr { + width : 50px; + height: 50px; + background: hsla(215, 100%, 50%, 0.3); + transition: transform 2s linear; +} + +.tr.d2 { transform: rotate(-120deg); } +.tr.d3x { transform: rotatex(-120deg); } +.tr.d3y { transform: rotatey(-120deg); } +.tr.d3z { transform: rotatez(-120deg); }</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var LENGTH = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc$)/ + var LENGTH_PERCENT = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc|%$)/ + + var KEYX = /^left|center|right$/ + var KEYY = /^top|center|bottom$/ + var KEYALL = /^left|center|right|top|bottom$/ + + var INPUT = document.querySelector('input[type=text]') + var ANGLE = document.querySelector('input[type=number]') + var CENTER= Array.from(document.querySelectorAll('.center')) + var TR = Array.from(document.querySelectorAll('.tr')) + + function update () { + INPUT.style.boxShadow = 'none' + var val = INPUT.value.trim() + var isValid = true + var v = val.split(/\s+/) + + isValid = isValid && (v[2] === undefined || LENGTH.test(v[2])) + isValid = isValid && (v[1] === undefined || LENGTH_PERCENT.test(v[1]) || KEYALL.test(v[1])) + isValid = isValid && (LENGTH_PERCENT.test(v[0]) || KEYALL.test(v[0])) + + if (v.length === 2) { + var double_key_words = KEYY.test(v[0]) && KEYX.test(v[1]) + var ordinary_value = (LENGTH_PERCENT.test(v[0]) || KEYX.test(v[0])) && (LENGTH_PERCENT.test(v[1]) || KEYY.test(v[1])) + + isValid = isValid && (double_key_words || ordinary_value) + } + + + if (!isValid) { + val = '50% 50%' + + if (v[0] !== '') { + INPUT.style.boxShadow = '0 0 .5em red' + } + } + + TR.forEach(function (tr, index) { + tr.style.transformOrigin = val; + + setTimeout(function () { + var pos = window.getComputedStyle(tr).transformOrigin.split(/\s+/); + + CENTER[index].style.left = pos[0] + CENTER[index].style.top = pos[1] + }, 0) + }) + } + + function rotate() { + var value = Math.min(360, Math.max(-360, Number(ANGLE.value) || 0)); + + document.querySelector('.d2').style.transform = 'rotate(' + value + 'deg)' + document.querySelector('.d3x').style.transform = 'rotatex(' + value + 'deg)' + document.querySelector('.d3y').style.transform = 'rotatey(' + value + 'deg)' + document.querySelector('.d3z').style.transform = 'rotatez(' + value + 'deg)' + Array.from(document.querySelectorAll('.angle')).forEach(function (node){ + node.innerText = value + }) + } + + function mouseenter() { + document.querySelector('.tr.d2' ).style.transform = 'rotate(0)' + document.querySelector('.tr.d3x').style.transform = 'rotatex(0)' + document.querySelector('.tr.d3y').style.transform = 'rotatey(0)' + document.querySelector('.tr.d3z').style.transform = 'rotatez(0)' + } + + INPUT.addEventListener('input', update) + ANGLE.addEventListener('input', rotate) + update() + rotate() + + document.querySelector('.row').addEventListener('mouseenter', mouseenter) + document.querySelector('.row').addEventListener('mouseleave', rotate) +})</pre> +</div> + +<p>{{EmbedLiveSample("transform-origin", "100%", 250, "", "", "example-outcome-frame")}}</p> + +<p><span id="result_box" lang="de"><span>Der Ankerpunkt ist somit der Punkt, um den eine Transformation angewendet wird.</span> <span>Zum Beispiel ist der Ankerpunkt der Funktion rotate() der Rotationsmittelpunkt.</span> <span>(Diese Eigenschaft wird angewendet, indem zuerst das Element durch den negierten Wert der Eigenschaft verschoben wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert zurück verschoben wird.)</span><br> + <br> + <span>Werte, die nicht explizit definiert sind, werden auf die entsprechenden Standardwerte zurückgesetzt.</span></span></p> + +<p>{{Cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> <code>transform-origin</code> <span id="result_box" lang="de"><span>kann mit einem, zwei oder drei Werten angegeben werden.</span></span></p> + +<ul> + <li>Syntax mit einem Wert: + <ul> + <li>Der Wert muss als <a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>, <a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>, oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> angegeben werden.</li> + </ul> + </li> + <li>Syntax mit zwei Werten: + <ul> + <li>Ein Wert muss eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>), ein Prozentwert (<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>) oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> sein.</li> + <li>Der andere Wert muss als eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("<length>")}}</a>), ein Prozentwert(<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("<percentage>")}}</a>) oder eines der Schlüsselwörter <code>top</code>, <code>center</code>, und <code>bottom</code> sein.</li> + </ul> + </li> + <li>Syntax mit drei Werten: + <ul> + <li>Die ersten zwei Werte entsprechen der Syntax mit zwei Werten.</li> + <li>Der dritte Wert muss ein {{cssxref("<length>")}}-Wert sein. Er repräsentiert immer den Wert auf der Z-Achse.</li> + </ul> + </li> +</ul> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><em>x-offset</em></dt> + <dd>Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der X-Achse von der oberden linken Ecke.</dd> + <dt><em>offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, und <code>center</code> beschreiben entsprechende Werte.</dd> + <dt><em>y-offset</em></dt> + <dd>Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der Y-Achse von der oberden linken Ecke.</dd> + <dt><em>x-offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, oder <code>center</code> beschreiben entsprechende Werte für die horizontale Transformation.</dd> + <dt><em>y-offset-keyword</em></dt> + <dd>Die Schlüsselwörter <code>top</code>, <code>bottom</code>, oder <code>center</code> beschreiben entsprechende Werte für die vertikale Transformation.</dd> + <dt><em>z-offset</em></dt> + <dd>Als {{cssxref("<length>")}} (und nicht als {{cssxref("<percentage>")}}) beschreibt den Versatz auf der Z-Achse relativ zu 0.</dd> +</dl> + +<p>Die Schlüsselwörte entschprechen folgenden Angaben in {{cssxref("<percentage>")}}:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Schlüsselwort</th> + <th scope="col">Wert</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>left</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>center</code></td> + <td><code>50%</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>100%</code></td> + </tr> + <tr> + <td><code>top</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>bottom</code></td> + <td><code>100%</code></td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Quellcode</th> + <th>Ausgabe</th> + </tr> + <tr> + <td> + <p><code>transform: none;</code></p> + </td> + <td> + <div class="hidden" id="transform_none"> + <pre class="brush: html"> +<div class="box1">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box1 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: none; +-webkit-transform: none; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_only"> + <pre class="brush: html"> +<div class="box2">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box2 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: 0 0;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate"> + <pre class="brush: html"> +<div class="box3">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box3 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: 0 0; +-webkit-transform-origin: 0 0; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: 100% 100%;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_with_percentage"> + <pre class="brush: html"> +<div class="box4">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box4 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: 100% 100%; +-webkit-transform-origin: 100% 100%; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: rotate(30deg);<br> + transform-origin: -1em -3em;</code></p> + </td> + <td> + <div class="hidden" id="transform_rotate_with_em"> + <pre class="brush: html"> +<div class="box5">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box5 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform-origin: -1em -3em; +-webkit-transform-origin: -1em -3em; +transform: rotate(30deg); +-webkit-transform: rotate(30deg); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);</code></p> + </td> + <td> + <div class="hidden" id="transform_scale_only"> + <pre class="brush: html"> +<div class="box6">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box6 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);<br> + transform-origin: 0 0;</code></p> + </td> + <td> + <div class="hidden" id="transform_scale_without_origin"> + <pre class="brush: html"> +<div class="box7">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box7 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +transform-origin: 0 0; +-webkit-transform-origin: 0 0; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: scale(1.9);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_scale"> + <pre class="brush: html"> +<div class="box8">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box8 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: scale(1.9); +-webkit-transform: scale(1.9); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: skewX(50deg);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_skew_x"> + <pre class="brush: html"> +<div class="box9">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box9 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: skewX(50deg); +-webkit-transform: skewX(50deg); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + <tr> + <td> + <p><code>transform: skewY(50deg);<br> + transform-origin: 100% -30%;</code></p> + </td> + <td> + <div class="hidden" id="transform_skew_y"> + <pre class="brush: html"> +<div class="box10">&nbsp;</div> +</pre> + + <pre class="brush: css"> +.box10 { +margin: 0.5em; +width: 3em; +height: 3em; +border: solid 1px; +background-color: palegreen; +transform: skewY(50deg); +-webkit-transform: skewY(50deg); +transform-origin: 100% -30%; +-webkit-transform-origin: 100% -30%; +} +</pre> + </div> + + <p>{{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }}</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikation"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></th> + <th scope="col">Status</th> + <th scope="col">Notiz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserunterstützung">Browserunterstützung</h2> + + + +<p>{{Compat("css.properties.transform-origin")}}</p> + +<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2> + +<ul> + <li><a href="/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden">CSS Transformationen verwenden</a></li> +</ul> |