La propiedad transformStyle se utiliza para establecer o devolver , las diferentes formas en que los elementos anidados utilizan para su representación en el espacio 3D .
Sintaxis:
- Devuelve transformStyle:
object.style.transformStyle
- Configuró transformStyle:
object.style.transformStyle = "flat|preserve-3d|initial|inherit"
Propiedades:
- flat: Es el valor de la propiedad por defecto. Sin embargo, los elementos secundarios no conservan la posición 3D.
- preserve-3d: permite que los elementos secundarios conserven su posición 3D.
- initial: establece transformStyle en su valor predeterminado.
- heredar: hereda los valores de la propiedad transformStyle del elemento padre.
Valor devuelto: Devuelve una string, que representa la propiedad de estilo de transformación del elemento.
Ejemplo-1: Mostrando propiedad plana.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transformStyle Property
</title>
<style>
#DIV1 {
padding: 0.4px;
position: absolute;
border: 1px solid black;
background-color: green;
-webkit-transform: rotateY(100deg);
transform: rotateY(50deg);
}
#DIV2 {
padding: 5px;
position: absolute;
border: 1px solid black;
background-color: lightgreen;
-webkit-transform: rotateY(0deg);
transform: rotateY(100deg);
}
</style>
</head>
<body>
<h1>
<center>
Geeks
<button onclick="gfg()">
Press
</button>
</center>
</h1>
<h4>
Clicking on the 'Press' button
will set the property to flat.
</h4>
<div id="DIV1">
<h2>GeeksforGeeks</h2>
<div id="DIV2">
<h1>12345</h1>
</div>
</div>
<script>
function gfg() {
// Set transform style for Apple Safari.
document.getElementById(
"DIV1").style.WebkitTransformStyle = "flat";
// Set "flat" transform style.
document.getElementById(
"DIV2").style.transformStyle = "flat";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Mostrando Conservar Propiedad 3D.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transformStyle Property
</title>
<style>
#DIV1 {
padding: 0.4px;
position: absolute;
border: 1px solid black;
background-color: green;
-webkit-transform: rotateY(100deg);
transform: rotateY(50deg);
}
#DIV2 {
padding: 5px;
position: absolute;
border: 1px solid black;
background-color: lightgreen;
-webkit-transform: rotateY(0deg);
transform: rotateY(100deg);
}
</style>
</head>
<body>
<h1>
<center>
Geeks
<button onclick="gfg()">
Press
</button>
</center>
</h1>
<h4>
Clicking on the 'Press' button
will set the property to preserve 3D.
</h4>
<div id="DIV1">
<h2>GeeksforGeeks</h2>
<div id="DIV2">
<h1>12345</h1>
</div>
</div>
<script>
function gfg() {
// Set Transform style property for Apple Safari.
document.getElementById(
"DIV1").style.WebkitTransformStyle =
"preserve-3d";
// Set "preserve-3d"
document.getElementById(
"DIV2").style.transformStyle =
"preserve-3d";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
Ejemplo-3: Mostrando la propiedad inicial.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transformStyle Property
</title>
<style>
#DIV1 {
padding: 0.4px;
position: absolute;
border: 1px solid black;
background-color: green;
-webkit-transform: rotateY(100deg);
transform: rotateY(50deg);
}
#DIV2 {
padding: 5px;
position: absolute;
border: 1px solid black;
background-color: lightgreen;
-webkit-transform: rotateY(0deg);
transform: rotateY(100deg);
}
</style>
<body>
<h1>
<center>
Geeks
<button onclick="gfg()">
Press
</button>
</center>
</h1>
<h4>
Clicking on the 'Press' button
will set the property to initial.
</h4>
<div id="DIV1">
<h2>GeeksforGeeks</h2>
<div id="DIV2">
<h1>12345</h1>
</div>
</div>
<script>
function gfg() {
// Set Transform style property for Apple Safari
document.getElementById(
"DIV1").style.WebkitTransformStyle =
"initial";
// Set "initial" Transform style
document.getElementById(
"DIV2").style.transformStyle =
"initial";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-4: Mostrando propiedad de herencia.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style transformStyle Property
</title>
<style>
#DIV1 {
padding: 0.4px;
position: absolute;
border: 1px solid black;
background-color: green;
-webkit-transform: rotateY(100deg);
transform: rotateY(50deg);
}
#DIV2 {
padding: 5px;
position: absolute;
border: 1px solid black;
background-color: lightgreen;
-webkit-transform: rotateY(0deg);
transform: rotateY(100deg);
}
</style>
</head>
<body>
<h1>
<center>Geeks
<button onclick="gfg()">
Press
</button>
</center>
</h1>
<h4>
Clicking on the 'Press' button
will set the property to inherit.
</h4>
<div id="DIV1">
<h2>GeeksforGeeks</h2>
<div id="DIV2">
<h1>12345</h1></div>
</div>
<script>
function gfg() {
// Set Transform property for Apple Safari.
document.getElementById(
"DIV1").style.WebkitTransformStyle =
"inherit";
// Set "inherit" transform property.
document.getElementById(
"DIV2").style.transformStyle =
"inherit";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Nota: Internet Explorer no admite esta propiedad.
Compatibilidad con navegadores: los navegadores compatibles con la propiedad transformStyle del estilo DOM se enumeran a continuación:
- Google Chrome 36 y superior
- Borde 12 y superior
- Firefox 16 y superior
- Ópera 23 y superior
- Safari 9 y superior
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA