transform Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transform

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

Description

The transform property sets and gets a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Property Values

Value Description
none Defines that there should be no transformation
matrix(n, n, n, n, n, n) 2D transformation, using a matrix of six values
matrix3d(n, n, n, n, etc....) 3D transformation, using a 4x4 matrix of 16 values
translate(x, y) 2D translation
translate3d(x, y, z) 3D translation
translateX(x) translation, using only the value for the X-axis
translateY(y) translation, using only the value for the Y-axis
translateZ(z) 3D translation, using only the value for the Z-axis
scale(x, y) 2D scale transformation
scale3d(x, y, z) 3D scale transformation
scaleX(x) scale transformation by giving a value for the X-axis
scaleY(y) scale transformation by giving a value for the Y-axis
scaleZ(z) 3D scale transformation by giving a value for the Z-axis
rotate(angle) 2D rotation, the angle is specified in the parameter
rotate3d(x, y, z, angle) 3D rotation
rotateX(angle)3D rotation along the X-axis
rotateY(angle)3D rotation along the Y-axis
rotateZ(angle)3D rotation along the Z-axis
skew(x-angle, y-angle)2D skew transformation along the X- and the Y-axis
skewX(angle) 2D skew transformation along the X-axis
skewY(angle) 2D skew transformation along the Y-axis
perspective(n)perspective view for a 3D transformed element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: none
Return Value: A String, representing the transform property of an element
CSS VersionCSS3

Rotate a div element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {/*from   w w  w . jav  a 2s  . c  o m*/
    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: coral;
    -webkit-transform: rotateY(50deg); /* Safari */
    transform: rotateY(50deg);
}

#DIV3 {
    padding: 40px;
    position: absolute;
    border: 1px solid black;
    background-color: lightblue;
    -webkit-transform: rotateY(70deg); /* Safari */
    transform: rotateY(70deg);
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="DIV1">DIV1
  <div id="DIV2">HELLO DIV2
    <div id="DIV3">HELLO DIV3</div>
  </div>
</div>

<script>
function myFunction() {
    // Code for Safari
    document.getElementById("DIV2").style.WebkitTransformStyle = "preserve-3d";
    // Standard syntax
    document.getElementById("DIV2").style.transformStyle = "preserve-3d";
}
</script>

</body>
</html>

Related Tutorials