Javascript Reference - HTML DOM Style transformOrigin Property








The transformOrigin property gets and sets the position on transformed elements.

Browser Support

transformOrigin Yes (WebkitTransformOrigin) 10.0 Yes Yes (WebkitTransformOrigin) Yes (WebkitTransformOrigin)

Syntax

Return the transformOrigin property:

var v = object.style.transformOrigin

Set the transformOrigin property:

object.style.transformOrigin='x-axis y-axis z-axis|initial|inherit'

Property Values

Value Description
x-axis where to put along the x-axis. Possible values:
  • left
  • center
  • right
  • length
  • %
y-axis where to put along the y-axis. Possible values:
  • top
  • center
  • bottom
  • length
  • %
z-axis where to put at the z-axis by length unit
initial Set to default value.
inherit Inherit from its parent element.




Technical Details

Default Value: 50% 50% 0
Return Value: A string representing the transform-origin property
CSS Version CSS3

Example

The following code shows how to set a rotated element's origin.


<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {<!--from w  w  w .j  ava  2 s .c  o  m-->
    height: 300px;
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

#DIV2 {
    width: 130px;
    height: 130px;
    border: 2px solid blue;
    background-color: coral;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

#DIV2original {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px dashed black;
    background-color: pink;
    opacity: 0.6;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="DIV1">DIV1
   <div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div>
</div>

<script>
function myFunction() {
    // Code for Chrome, Safari, Opera
    document.getElementById("DIV2").style.WebkitTransformOrigin = "0 0";
    // Code for IE9
    document.getElementById("DIV2").style.msTransformOrigin = "0 0";
    // Standard syntax
    document.getElementById("DIV2").style.transformOrigin = "0 0";
}

</script>
</body>
</html>

The code above is rendered as follows: