Propiedad CSS transform-style
La propiedad transform-style especifica cómo se renderizan los elementos hijos en un espacio tridimensional (3D).
Esta propiedad es una de las propiedades CSS3.
Solo funciona con la propiedad transform.
La propiedad transform-style tiene dos valores: flat y preserve-3d. Si se establece el valor "flat", los hijos del elemento no existirán por sí mismos en el espacio 3D.
INFO
Para una máxima compatibilidad con los navegadores, se utiliza la extensión -webkit- para Safari, Google Chrome y Opera (versiones recientes) con esta propiedad.
| Valor inicial | flat |
|---|---|
| Se aplica a | Elementos transformables. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.transformStyle = "flat"; |
Sintaxis
Valores de CSS transform-style
css
transform-style: flat | preserve-3d | initial | inherit;Ejemplo de la propiedad transform-style:
Ejemplo de código CSS transform-style
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#element {
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
#element1 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #8ebf42;
-webkit-transform: rotateY(50deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(50deg);
transform-style: preserve-3d;
}
#element2 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #1c87c9;
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
}
</style>
</head>
<body>
<h2>Transform-style property example</h2>
<div id="element">
<div id="element1">
Green
<div id="element2">Blue</div>
</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad transform-style con el valor "flat":
Ejemplo de la propiedad CSS transform-style con valor flat
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
position: relative;
height: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #cccccc;
background-color: #eeeeee;
}
.element1 {
margin: 20px;
border: 1px dotted;
height: 150px;
width: 150px;
background-color: green;
transform: rotateX(15deg);
transform-style: flat;
}
.element2 {
margin: 20px;
border: 1px dotted;
height: 200px;
width: 200px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Transform-style property example</h2>
<div class="element">
<div class="element1">
Green
<div class="element2">Blue</div>
</div>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| flat | Define que los hijos de los elementos no se posicionarán en un espacio tridimensional. Este es el valor predeterminado de esta propiedad. |
| preserve-3d | Define que los hijos de los elementos se posicionarán en un espacio tridimensional. |
| initial | Establece esta propiedad en su valor predeterminado. |
| inherit | Hereda esta propiedad de su elemento padre. |
Práctica
La propiedad transform-style solo funciona con la