Una transformación en CSS se usa para modificar un elemento por su forma, tamaño y posición. Transforma los elementos a lo largo del eje X y el eje Y. Hay 6 tipos principales de transformación que se enumeran a continuación:
- translate()
- girar()
- escala()
- sesgarX()
- sesgadoY()
- array()
Implementaremos todas estas funciones y entenderemos sus conceptos a través de los ejemplos.
Método translate() : El método translate() se utiliza para mover el elemento desde su posición real a lo largo del eje X y el eje Y.
Ejemplo: Este ejemplo describe el método CSS translate() para modificar la posición de un elemento desde su posición real.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
.geeks {
font-size: 25px;
margin: 20px 0;
margin-left: 100px;
}
img {
border: 1px solid black;
transition-duration: 2s;
-webkit-transition-duration: 2s;
}
img:hover {
transform: translate(100px, 100px);
/* prefix for IE 9 */
-ms-transform: translate(100px, 100px);
/* prefix for Safari and Chrome */
-webkit-transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div class="geeks">Translate() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Método de rotate() : el método de rotate() gira un elemento en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj según un grado dado. El grado se da entre paréntesis.
Ejemplo: Este ejemplo describe el método de rotate() de CSS para rotar un elemento en sentido horario o antihorario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">Rotation() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Rotación en sentido contrario a las agujas del reloj: use valores negativos para rotar el elemento en sentido contrario a las agujas del reloj.
Ejemplo: este ejemplo describe el método de rotación en contra del reloj() de CSS para rotar un elemento en el sentido de las agujas del reloj utilizando los valores negativos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">Counter-clock Rotate() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Método scale() : Se utiliza para aumentar o disminuir el tamaño de un elemento de acuerdo con el parámetro dado para el ancho y la altura.
Ejemplo: Este ejemplo describe el método CSS scale() para cambiar el tamaño del elemento según su ancho y alto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: scale(1, 2);
/* Safari */
-webkit-transform: scale(1, 1);
/* Standard syntax */
transform: scale(1, 2);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">Scale() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Nota: El tamaño de los elementos se puede reducir usando la mitad de su ancho y alto.
Método skewX() : este método se usa para sesgar un elemento en el ángulo dado a lo largo del eje X.
Ejemplo: Este ejemplo describe el método CSS skewX() para sesgar el elemento en el eje X.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skewX() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Método skewY() : este método se usa para sesgar un elemento en el ángulo dado a lo largo del eje Y.
Ejemplo: Este ejemplo describe el método CSS skewY() para sesgar el elemento en el eje Y.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skewY() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Método skew() : este método sesga un elemento en el ángulo dado a lo largo del eje X y el eje Y. El siguiente ejemplo sesga el elemento 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y.
Ejemplo: Este ejemplo describe el método skew() de CSS para sesgar un elemento en el ángulo dado a lo largo del eje X y el eje Y.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skew(20deg, 10deg);
/* Safari */
-webkit-transform: skew(20deg, 10deg);
/* Standard syntax */
transform: skew(20deg, 10deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skew() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Método matrix() : este método combina todas las propiedades de transformación 2D en una sola propiedad. La propiedad de transformación de array acepta seis parámetros como array (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
Ejemplo: este ejemplo describe el método CSS matrix() para combinar todas las propiedades de transformación 2D en una sola propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">matrix() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 36.0
- Microsoft Edge 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 23.0
- Safari 9.0
Nota: Internet Explorer no admite los valores globales initial y unset.
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA