transformStyle Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transformStyle

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

Description

The transformStyle property sets or gets how nested elements are rendered in 3D space.

Property Values

Value Description
flatDefault value. The child elements will not preserve its 3D position
preserve-3d child elements will preserve its 3D position
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

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

Let the transformed child elements preserve the 3D transformations:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {/*from   w ww.  j  a v 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