Summarize the usage of transform-origin

Keywords: Front-end Attribute Android Firefox IE

 

  • Single-valued grammar:
    • The value must be one <length> One <percentage> Or one of the keywords left, center, right, top, and bottom.
  • Binary Grammar:
  • Ternary grammar:
    • The first two values are the same as the binary grammar.
    • The third value must be a <length> . It always represents Z offset.

this CSS Property is set to the transformation origin of the element. transform-origin

The origin of the transformation is the point at which the transformation is applied. For example, rotate() The transformation origin of the function is the center of rotation. (The attribute is applied by first converting the element using the negative value of the attribute, then applying the transformation of the element, and then converting the attribute value.)

By default, the origin of the transformation is center.

syntax Section 

<span style="color:#333333"><code class="language-css"><span style="color:#708090">/* One-value syntax */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">2</span>px<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> bottom<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset | y-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">3</span>cm <span style="color:#990055">2</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> left <span style="color:#990055">2</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset-keyword */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> right top<span style="color:#999999">;</span>

<span style="color:#708090">/* y-offset-keyword | x-offset-keyword */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> top right<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset | y-offset | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">2</span>px <span style="color:#990055">30</span>% <span style="color:#990055">10</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> left <span style="color:#990055">5</span>px <span style="color:#990055">-3</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset-keyword | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> right bottom <span style="color:#990055">2</span>cm<span style="color:#999999">;</span>

<span style="color:#708090">/* y-offset-keyword | x-offset-keyword | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> bottom right <span style="color:#990055">2</span>cm<span style="color:#999999">;</span>

<span style="color:#708090">/* Global values */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> inherit<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> initial<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> unset<span style="color:#999999">;</span></code></span>

The transform-origin attribute can use one, two or three values, each of which represents an offset to specify. An undefined offset will be reset to its corresponding initial value.

If two or more values are defined, and no value is a key word, or the only key used is center, the first value represents a horizontal offset and the second value represents a vertical offset.

  • Single-valued grammar:
    • The value must be one <length> One <percentage> Or one of the keywords left, center, right, top, and bottom.
  • Binary Grammar:
  • Ternary grammar:
    • The first two values are the same as the binary grammar.
    • The third value must be a <length> . It always represents Z offset.

value Section

x offset

It's a. <length> still <percentage> Describes how to set the distance of the transformation origin from the left edge of the box.

Migration keywords

A left, right, top, bottom, or center keyword describes the corresponding offset.

y offset

It's a. <length> still <percentage> Describes how far away from the top edge of the box, and sets the transformation point.

x offset keyword

Is a left, right or center keyword that describes how far from the left edge of the forbidden zone to transform the origin settings.

y offset keyword

A top, bottom, or center keyword describes how far the transformation origin is from the top edge of the box.

Z-migration

yes <length> (and never) <percentage> It invalidates the declaration.) Describes the distance between the user's eyes and the origin of z = 0.

Keyword is a convenient abbreviation and matches the following <percentage> Value:

Key word value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formal Grammar Section

<span style="color:#333333"><a data-cke-saved-href="https://Developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax#Brackets "href=" https://developer.mozilla.org/en-US/docs/CSS/CSS/CSS/Value_definition_syntax#Brackets ">[<</a> <a data-cke-saved-saved-href=" https:////developer.mozi.mozi.developer.mozi.mozi.org/en-docs/en-docs/CSS/CSS/docs/CSS/CSS/CSS/Web/transform-CSS# Brackets hththththththththththter.moz Https://developer.moziilla.org/en-US/docs/Web/en-US/docs/Web/CSS/transform-origin #length-percentage "><length-percentage><<length-percentage>< <a > <a data-cke-saved-href= https://developer.mozilla.org/en-US/docs/docs/CSS/CSS/Value_definition_syntax\#Single_single_bar #href =" href ="https://developer.mozilla//developer.mozi.developer.mozi/////developer.mozi.molla.org/en-US/docs/CSS/docThe results of this study are as follows:1. A-cke-saved-href = "https:///developer.mozilla.org/en-US/docs/CSS/CSS/CSS/CSS/Value_definition_syntax#Single_bar #Single_bar" href = "https://developer.developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_definition_syntax\#Single_bar\#Single_bar"> <<<<<<<////developer.mozilla.org/en-US/docs/CSS/CSS/CSS/CSS/CSS/CSS/CSS/developer.momomomozilla-zizizix#Single_b Https:///developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar>> <<< <////a> <a data-cke-saved-href = < <a data-cke-saved-href ="https://developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax#Single_single_bar ##Single_bar # href=" href="https:///developer.mozilla.developer.mozilla.mozilla.mozilla.mozilla.mozilla.org/en-US/mozilla.bar">"|</a> Top <a data-cke-saved-href= "https://developer.mozilla.org/en-US/docs/CSS/CSS/developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax #Single_bar" href= "https://developer.mozilla.org/en-US/docs/CSS/CSS/CSS/Value_definition_definition_syntax\#Single_bar\#Single_bar">> <<<////data-data-data-saved-saved-href= "https://developer.mozilla.hthththththththten-US/developue_definition_syn Tax #Brackets # Brackets "href =" href ="https:///developer.mozilla.org/en-US/docs/CSS/CSS/CSS/Value_definition_syntax #Brackets">]<< </a> <</////a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/en-US/docs/docs/CSS/CSS/CSS/Value_definition_xx#Single_single_bar #single_definition_single_bar"href="href =" https://///developer.mozilla.mozilla.org x#Single_bar">| <<a> <a data-cke-saved-href= "https:///developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax#Brackets ##Brackets" href= "https:///developer.mozilla.org/en-US/docs/developer.mozilla.org/en-US/docs/CSS/CSS/CSS/Value_definition_syntax\#Brackets;[<< <///////////a><a data-data-saved-saved-href=:::://////developer.mozilla://// Value_definition_syntax # Brack Https:///developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax# Brackets "> [< </a > <a data-cke-saved-saved-href=> [< < <</a><a Data-A ><a data-cke-saved-href =https://developer.mozilla.org/en-US/docs/Web/CSS/CSS/Web/CSS/CSS/transform-transform-origin ## length-percentage percentage of href=" https:///developer.momozilla.mozilla.mozilla.mozilla.mozilla.mozilla.mo>l Ength-percentage> </a> <a data-cke-saved-href = <a data-cke-saved-href = "https://developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_definition_syntax\#Single_bar#Single_bar" href= "https://developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_definition_syntax\#Single_bar]>> <<<</////a data-cke-saved-href= <a data-cke-saved-saved-href="https://developer.mozilla://docs/CSS/Val Reef= https://developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax #Single_bar ">> << <//a> </> </a> Center <a data-cke-saved-href=" https://developer.mozilla.mozilla.org/en-doc/en-doc/docs/docs/CSS/CSS/Value_definition_definition_single_syntax#Single_single single_bar#single_single_bar ##single_bar:#single_single_bar #single_bar #href="href=" href="https:///developer.mozilla.ue_defin Https://developer.mozilla.org/en-US/docs/CSS/docs/CSS/docs/US/en-US/docs/CSS/CSS/CSS/CSS/Value_definition_syntax#Brackets "href =" https://developer.mozilla.org/en-US/docs/docs/CSS/CSS/Value_definition_syntax##Brackets ####Brackets>>> <<<<< <a><a ><a > <data-cke-saved-hththththththttp::///developer.mozilla developer.developer.mozilla.developer.developer.developer.zilla.org/en-US/docs/CSS/V Alue_definition_definition_syntax## Double_ampers and "href=" https:///developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax#Double_ampersand "> & & & & & & & & & & & & & & & & & & & <///a><a data-cke-saved-href=" https://developer.mozilla.mozilla.org/en-US/en-US/docs/CSS/CSS/CSS/CSS/CSS/CSS/ue_Value_Value_Valsyntax\\\#Bras "hrs/CSS/Val Redefinition_definition_syntax## Brackets #Brackets "> [< </a> <a data-cke-saved-href=" https://developer.mozilla.org/en-US/docs/developer.mozilla.org/en-US/docs/Web/CSS/CSS/CSS/Web/CSS/CSS/transform-transform-origin \\\\\\\\\\\dev Eloper.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax##Single_bar "href=" https:///developer.mozilla.org/en-US/docs/CSS/CSS/Value_definition_syntax#Single_bar "> <<<///a>>> <<<<<//////////////////////////////////////////////developer.mozi.mozi.org/en-US/docs/docs/CSS/CSS/Value_definition_definition_syntax\#Single_single_bar/developer.m Https://developer.mozilla.org/en-US/docs/CSS/en-US/docs/CSS/Value_definition_syntax#Single_bar #Single_bar "> << </a> < a data-cke-saved-saved-href=" https://developer.mozilla.org/en-US/docs/docs/CSS/CSS/Value_definition_syntax\#Single_bar #Single_bar #single_bar "href=" href ="https://developer.mozilla//developer.mozilla.developer.mozilla.org/en-US/docue/docue/CSS/CSS/doc-saved-href=" Https:////developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax# Brackets # Brackets https:///developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax##Brackets ">>] <<</////a ><a-cke-data-saved-href=" https:////developer.momomomomomomomozilla.org/en-lla/en-docs/docs/CSS/docs/Value_definition/CSS/CSS/Value_definition_definition_syntax_syntax_definition_definition_syntax\https://developer.m Https://developer.mozilla.org/en-US/docs/org/en-US/docs/CSS/CSS/Value_definition_syntax#Brackets #Brackets'>] << <a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS/length"href="length"href="https:////developer.mozilla.org/en-US/docs/Web/CSS/CSS/CSS/length"href="https:///developer.mozilla.org/developer.mozilla.org/en/en-en lla.org/en-US/docs/CSS/Value_def Inition_syntax#Question_mark_() "href=" https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Question_mark_()">? </a></span>

Where?
<length-percentage> = <length> | <percentage>

Example Section

code sample

transform: none;

  

transform: rotate(30deg);

  

transform: rotate(30deg);
transform-origin: 0 0;

  

transform: rotate(30deg);
transform-origin: 100% 100%;

  

transform: rotate(30deg);
transform-origin: -1em -3em;

  

transform: scale(1.7);

  

transform: scale(1.7);
transform-origin: 0 0;

  

transform: scale(1.7);
transform-origin: 100% -30%;

  

transform: skewX(50deg);
transform-origin: 100% -30%;

  

transform: skewY(50deg);
transform-origin: 100% -30%;

  

Product Specification Section

Specifications state comment
CSS Transforms Level 1
The definition of'transform-origin'in the specification.		 Draft Work  
initial value 50% 50% 0
Applicable to Deformable elements
inheritance No,
Percentage Size of reference boundary box
media vision
calculated value about <length> Absolute value, otherwise percentage
Animation Types A simple list of lengths, percentages, or calculations
Regulating Order One or two values with absolute length and percentage keywords

Browser Compatibility

  desktop move
  chromium edge Firefox IE browser Opera Apple Browser Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
transform-origin Full Support 36 Open Full Support 12 Open Full Support 16 Open Full Support 10 Open Full Support 23 Open Full Support 9 Open Full support 37 open Full Support 36 Open Full Support 16 Open Full Support 24 Open Full Support 9 Open Full support for 3.0 Open
Ternary grammar Full support yes Full support 12 Full support 10 Full support 9 No support number Full support yes Full support yes Full support yes Full support 10 No support number ？ ？
Support for SVG

test

 Full support yes Full support 17 Full support 43

note

open 		No support number Full support yes ？ Full support yes Full support yes Full support 43

note

open 		？ ？ ？

Content Origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Record this for a rainy day!  

Legend

 

Posted by freakuency on Thu, 01 Aug 2019 02:57:11 -0700

Hot Keywords

©2024 Programmer Group