La propiedad de estilo de transformación de CSS se utiliza para transformar elementos secundarios para conservar las transformaciones 3D. La propiedad transform-style se usa para especificar que los elementos secundarios de un elemento se colocan en el espacio 3D o se aplanan con respecto al plano del elemento. El valor de la propiedad preserve-3d en un elemento, uno puede conservar las transformaciones 3D de su elemento secundario.
Sintaxis:
transform-style: preserve-3d
Valores de propiedad:
- preserve-3d: este valor permite que los elementos secundarios conserven su posición 3D.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: green;
}
.parent {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* Now its child's 3d-position is preserved which means
childrens of the this element should be positioned
in the 3D-space not in a plane */
transform-style: preserve-3d;
}
.child {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<b>CSS transform-style Property</b>
<div class="parent">
<div class="child"></div>
</div>
</center>
</body>
</html>
Producción:
estilo de transformación: preservar 3d
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: green;
}
.parent {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* Now its child's 3d-position is preserved which means
childrens of the this element should be positioned
in the 3D-space not in a plane */
transform-style: preserve-3d;
}
.child {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
.gfg1 {
margin: 20px;
border: 1px double;
height: 200px;
width: 200px;
background-color: green;
transform: rotateX(15deg);
/* flat is default value whose children element
are lying in the plane of the element itself */
transform-style: flat;
}
.gfg2 {
margin: 20px;
border: 1px dashed;
height: 250px;
width: 250px;
background-color: lightgreen;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<br />
<table>
<tr>
<td width="350px">
<div>
<b>Flat(default) Property Value</b>
<div class="parent">
<div class="child"></div>
</div>
</div>
</td>
<td width="350px">
<div>
<b>preserve-3d Property Value</b>
<div class="gfg1">
<div class="gfg2"></div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
plano y preservar propiedades 3d
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA