The transform-origin property allows to change the position of the elements’ transformation.
The transform-origin property is one of the CSS3 properties.
The transform-origin property works only with the transform property.
This property can be specified using offset keywords, length values, or percentage values.
For maximum browser compatibility, extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions) are used with this property.
Initial Value
50% 50% 0
Applies to
Transformable elements.
Inherited
No.
Animatable
Yes. Degree is animatable.
Version
CSS3
DOM Syntax
Object.style.transform-origin = “10% 30%”;
Tóm Tắt
Syntax
transform-origin
: x-offset y-offset z-offset | initial | inherit;
Example of the transform-origin property:
<
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 »
Result
Another example which shows the difference between values.
Example of transform-origin with four values:
<
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 »
Values
Value
Description
x-offset
Specifies the position of view in x-offset. It can have the following values:
- left
- right
- center
- length
- percentage
y-offset
Specifies the position of view in y-offset. It can have the following values:
- top
- center
- bottom
- length
- percentage
z-offset
Specifies where the view is placed at the z-offset for 3D transformations. It can have the following values:
- length
initial
Sets this property to its default value.
inherit
Inherits this property from its parent element.