Permite cambiar elementos mediante transformaciones 3D. En la transformación 3D, los elementos se giran a lo largo del eje X, el eje Y y el eje Z.
Hay tres tipos principales de transformación que se enumeran a continuación:
- rotarX()
- rotarY()
- rotarZ()
El método de rotación X(): esta rotación se utiliza para rotar elementos alrededor del eje X en un grado determinado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>3D Transformation</title>
<style>
.normal_div {
width: 300px;
height: 150px;
color: white;
font-size:25px;
background-color: green;
border: 1px solid black;
margin-bottom:20px;
}
#rotateX {
width: 300px;
height: 150px;
color: white;
font-size:25px;
background-color: green;
border: 1px solid black;
-webkit-transform: rotateX(180deg); /* Safari */
transform: rotateX(180deg); /* Standard syntax */
}
.gfg {
font-size:40px;
font-weight:bold;
color:#090;
}
.geeks {
font-size:25px;
font-weight:bold;
margin:20px 0;
}
</style>
</head>
<body>
<center>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">rotateX() Method</div>
<div class = "normal_div"> Div Contents... </div>
<div id="rotateX">180 degree rotated contents...</div>
</center>
</body>
</html>
Producción:
El método de rotaciónY(): este método se utiliza para rotar un elemento alrededor del eje Y en grados dados.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>3D Transformation</title>
<style>
.normal_div {
width: 200px;
color:white;
font-size:25px;
height: 100px;
background-color: green;
border: 1px solid black;
margin-bottom:20px;
}
#rotateY {
width: 200px;
color:white;
font-size:25px;
height: 100px;
background-color: green;
border: 1px solid black;
-webkit-transform: rotateY(180deg); /* Safari */
transform: rotateY(100deg); /* Standard syntax */
}
.gfg {
font-size:40px;
font-weight:bold;
color:#090;
}
.geeks {
font-size:25px;
font-weight:bold;
margin:20px 0;
}
</style>
</head>
<body>
<center>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">rotateY() Method</div>
<div class = "normal_div"> Div Contents... </div>
<div id="rotateY">180 degree rotated div contents...</div>
</center>
</body>
</html>
Producción:
El método de rotate() : este método se usa para rotar un elemento alrededor del eje Z en un grado dado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>3D Transformation</title>
<style>
.normal_div {
width: 200px;
height: 100px;
font-size:25px;
color:white;
background-color: green;
border: 1px solid black;
}
#rotateZ {
width: 200px;
height: 100px;
color:white;
font-size:25px;
background-color: green;
border: 1px solid black;
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg); /* Standard syntax */
}
.gfg {
font-size:40px;
font-weight:bold;
color:#090;
}
.geeks {
font-size:25px;
font-weight:bold;
margin:20px 0;
}
</style>
</head>
<body>
<center>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">rotateZ() Method</div>
<div class = "normal_div"> Div Contents... </div>
<div id="rotateZ">90 degree rotated contents...</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA