transform-style - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform-style

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transform-style

Description

The transform-style CSS property sets whether the children element are positioned in the 3D-space or are flattened.

This property is only applied to child elements with a transform property specified.

The following table summarizes the transform-style Property.

Item Value
Default value: flat
Applies to:Transformable elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


transform-style:     flat | preserve-3d | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
flatThe children of the element are flattened i.e. lying in the plane of the element itself. This is default value.
preserve-3d The children of the element should be positioned in the 3D-space.
initial Sets this property to its default value.
inherit take the value of its parent element transform-style property.

The example below shows the transform-style property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 transform-style Property</title>
  <style type="text/css">
  img {<!--  ww w . j a va  2  s.  c  o  m-->
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-style: preserve-3d;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-style: preserve-3d;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-style: preserve-3d;
    /* Standard syntax */
    transform: rotate(30deg);
    transform-style: preserve-3d;
  }
  .box{
        margin: 50px;
        width:120px;
        height:110px;
        background: url("../images/star-fish-transparent.png") no-repeat;
    }
</style>
 </head>
 <body>
  <div class="box">
   <img src="https://www.java2s.com/style/demo/Opera.png" alt="Star Fish">
  </div>
 </body>
</html>

Related Tutorials