CSS | Propiedad de estilo de transformación

La propiedad de estilo de transformación se usa para especificar que los elementos secundarios de un elemento estén colocados en el espacio 3D o aplanados con respecto al plano del elemento.

Sintaxis:

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

Valores de propiedad:

flat: este valor coloca los elementos secundarios en el mismo plano del elemento principal. No conserva la posición 3D. Es el valor predeterminado.

Ejemplo:

<!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>

Producción:
flat

preserve-3d: este valor permite que los elementos secundarios conserven su posición 3D.

Ejemplo:

<!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>

Producción:
preserve3d

initial: Esto se usa para establecer la propiedad en su valor predeterminado.

Ejemplo:

<!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>

Producción:
initial

heredar: Se utiliza para heredar la propiedad de su elemento padre.

Ejemplo:

<!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>

Producción:
inherit

Navegadores compatibles: los navegadores compatibles con la propiedad de estilo de transformación CSS se enumeran a continuación:

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-

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta