Skip to content
Related Articles

Related Articles

Improve Article

CSS | transform-style Property

  • Last Updated : 26 Jul, 2019

The transform-style property is used specify the children of an element are position in 3D space or flattened with respect to the plane of the element.

Syntax:

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

Property Values:

  • flat: This value places the child elements in the same plane of the parent. It does not preserve the 3D position. It is the default value.

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .parent {
                margin: 20px;
                border: 1px dotted;
                height: 200px;
                width: 200px;
                background-color: green;
                transform: rotateX(15deg);
                transform-style: flat;
            }
            .child {
                margin: 20px;
                border: 1px dotted;
                height: 250px;
                width: 250px;
                background-color: lightgreen;
                transform: rotateX(45deg);
            }
        </style>
    </head>
      
    <body>
        <h1>CSS transform-style Property</h1>
        <p>
            The CSS transform-style Property is used
            to set if the children of elements are
            position in 3D space or flattened.
        </p>
          
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
      
    </html>

    Output:
    flat

  • preserve-3d: This value enables the child elements to preserve their 3D position.

    Example:






    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .parent {
                margin: 20px;
                border: 1px dotted;
                height: 200px;
                width: 200px;
                background-color: green;
                transform: rotateX(15deg);
                transform-style: preserve-3d;
            }
            .child {
                margin: 20px;
                border: 1px dotted;
                height: 250px;
                width: 250px;
                background-color: lightgreen;
                transform: rotateX(45deg);
            }
        </style>
    </head>
      
    <body>
        <h1>CSS transform-style Property</h1>
          
        <p>
            The CSS transform-style Property is used
            to set if the children of elements are
            position in 3D space or flattened.
        </p>
          
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
      
    </html>

    Output:
    preserve3d

  • initial: This is used to set the property to its default value.

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .parent {
                margin: 20px;
                border: 1px dotted;
                height: 200px;
                width: 200px;
                background-color: green;
                transform: rotateX(15deg);
                transform-style: initial;
            }
            .child {
                margin: 20px;
                border: 1px dotted;
                height: 250px;
                width: 250px;
                background-color: lightgreen;
                transform: rotateX(45deg);
            }
        </style>
    </head>
      
    <body>
        <h1>CSS transform-style Property</h1>
          
        <p>
            The CSS transform-style Property is used
            to set if the children of elements are
            position in 3D space or flattened.
        </p>
          
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
      
    </html>

    Output:
    initial

  • inherit: It is used to inherit the property from its parent element.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <style>
            .main {
                transform-style: flat;
            }
            .parent {
                margin: 20px;
                border: 1px dotted;
                height: 200px;
                width: 200px;
                background-color: green;
                transform: rotateX(15deg);
                transform-style: inherit;
            }
      
            .child {
                margin: 20px;
                border: 1px dotted;
                height: 250px;
                width: 250px;
                background-color: lightgreen;
                transform: rotateX(45deg);
            }
        </style>
    </head>
    <body>
        <h1>CSS transform-style Property</h1>
          
        <p>
            The CSS transform-style Property is used
            to set if the children of elements are
            position in 3D space or flattened.
        </p>
          
        <div class="main">
            <div class="parent">
                <div class="child"></div>
            </div>
        </div>
    </body>
      
    </html>

    Output:
    inherit

Supported Browsers: The browser supported by CSS transform-style property are listed below:

  • Chrome 36.0, 12.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 16.0, 10.0 -moz-
  • Safari 9.0, 4.0 -webkit-
  • Opera 23.0, 15.0 -webkit-



My Personal Notes arrow_drop_up
Recommended Articles
Page :