Javascript Reference - HTML DOM Style transformStyle Property








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

Browser Support

transformStyle Yes (WebkitTransformStyle) No Yes Yes (WebkitTransformStyle) Yes (WebkitTransformStyle)

Syntax

Return the transformStyle property:

var v = object.style.transformStyle

Set the transformStyle property:

object.style.transformStyle='flat|preserve-3d|initial|inherit'

Property Values

Value Description
flat Default value. The child elements will not preserve its 3D position
preserve-3d preserve 3D position for child elements
initial Set to default value.
inherit Inherit from parent element.




Technical Details

Default Value: flat
Return Value: A string representing the transform-style property
CSS Version CSS3

Example

The following code shows how to preserve the 3D transformations for child elements.


<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {<!--from w w w. java 2  s  .c  o m-->
    position: relative;
    height: 100px;
    width: 100px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}

#DIV2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: coral;
    -webkit-transform: rotateY(20deg); /* Chrome, Safari, Opera */
    transform: rotateY(20deg);
}

#DIV3 {
    padding: 20px;
    position: absolute;
    border: 1px solid black;
    background-color: lightblue;
    -webkit-transform: rotateY(70deg); /* Chrome, Safari, Opera */
    transform: rotateY(70deg);
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

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

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

The code above is rendered as follows: