--- title: transform-origin slug: Web/CSS/transform-origin tags: - CSS - CSS Property - CSS Transforms translation_of: Web/CSS/transform-origin ---
{{ CSSRef }}
transform-origin
CSS属性让你更改一个元素变形的原点。
转换起点是应用转换的点。例如,rotate()
函数的转换原点是旋转中心。(这个属性的应用原理是先用这个属性的赋值转换该元素,进行变形,然后再用这个属性的值把元素转换回去)
默认的转换原点是 center
/* One-value syntax */ transform-origin: 2px; 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;
transform-origin
属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
如果定义了两个或更多值并且没有值的关键字,或者唯一使用的关键字是center
,则第一个值表示水平偏移量,第二个值表示垂直偏移量。
left
, center
, right
, top
, bottom
关键字中的一个。left
, center
, right
关键字中的一个。top
, center
, bottom
关键字中的一个。left,
right,
top,
bottom或
center中之一,定义相对应的变形中心偏移。
left,
right
或
center中之一,定义相对应的变形中心偏移。
top,
bottom或
center中之一,定义相对应的变形中心偏移。
关键字是方便的简写方法,等同于以下{{cssxref("<percentage>")}}值:
keyword | value |
---|---|
left |
0% |
center |
50% |
right |
100% |
top |
0% |
bottom |
100% |
Code | Sample |
---|---|
|
<div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } {{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}
|
|
<div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } {{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}
|
|
<div class="box3"> </div> .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); } {{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}
|
|
<div class="box4"> </div> .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); } {{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}
|
|
<div class="box5"> </div> .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); } {{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}
|
|
<div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( {{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}
|
|
<div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( {{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}
|
|
<div class="box8"> </div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( {{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}
|
|
<div class="box9"> </div> .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%; } {{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}
|
|
<div class="box10"> </div> .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%; } {{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}
|
Specification | Status | Comment |
---|---|---|
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }} | {{ Spec2('CSS3 Transforms') }} |
{{Cssinfo}}
{{Compat("css.properties.transform-origin")}}