transformOrigin Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transformOrigin

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. transformOrigin

Description

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

Property Values

Value Description
x-axis where the view is placed at the x-axis. Possible values: left center right length %
y-axis where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis where the view is placed at the z-axis. Possible values: length
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 50% 50% 0
Return Value: A String, representing the transform-origin property of an element
CSS VersionCSS3

Set a rotated element's base placement:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {/*  ww  w .  ja  v a 2 s  .  c o m*/
    height: 200px;
    width: 200px;
    margin: auto;
    border: 1px solid black;
}

#DIV2 {
    width: 150px;
    height: 150px;
    border: 1px solid black;
    background-color: coral;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}

#DIV2original {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 1px dashed red;
    background-color: lightgrey;
    opacity: 0.5;
}
</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 Safari
    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>

Related Tutorials