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