CSS Property transform-origin








The transform-origin property sets the point of origin of a transform.

Summary

Initial value
50% 50% 0
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.transformOrigin="0 0"
Animatable
yes

CSS Syntax

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

Possible values for x-axis:

  • left
  • center
  • right
  • length
  • %

Possible values for y-axis:

  • top
  • center
  • bottom
  • length
  • %

Possible values for z-axis:

  • length




Property Values

x-axis
Defining where the view is placed at the x-axis.
y-axis
Defining where the view is placed at the y-axis.
z-axis
Defining where the view is placed at the z-axis.

Browser compatibility

transform-origin Yes 10.0 Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {<!--  w  ww.j  a va 2s .  c om-->
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); 
    -webkit-transform-origin: 30% 40%;
    transform: rotate(45deg);
    transform-origin: 30% 40%;
}
</style>
</head>
<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

Click to view the demo