Aplicar múltiples transformaciones en CSS
-
Aplique múltiples transformaciones especificando múltiples valores de
transformaciónen CSS -
Aplique múltiples transformaciones especificando múltiples
transformasen CSS -
Aplique múltiples transformaciones especificando múltiples
transform-originen CSS - Aplicar Transformaciones Múltiples Usando Clases Anidadas en CSS
- Conclusión
CSS transform es una forma poderosa pero infrautilizada de agregar efectos de animación a los elementos. Sin embargo, cuando se aplican varias transformaciones a la vez, puede resultar complicado obtener el resultado deseado; por ejemplo, queremos que los elementos se transformen en sincronización cuando los elementos se superponen.
Este artículo explorará cómo se pueden aplicar múltiples transformaciones en CSS.
Aplique múltiples transformaciones especificando múltiples valores de transformación en CSS
Hay muchas formas de utilizar múltiples transformaciones de CSS. Los discutiremos en las siguientes secciones.
Una forma de aplicar múltiples transformaciones de CSS es utilizar la propiedad abreviada transformar. Esta propiedad puede tomar múltiples valores, separados por espacios.
Por ejemplo:
transform: rotate(45deg) scale(2);
Esta línea rotaría un elemento 45 grados y luego duplicaría su tamaño.
Otro ejemplo es si quisiera rotar un elemento 30 grados y luego traducirlo 50 px, utilizaría el siguiente código:
transform: rotate(30deg) translate(50px);
Esta línea puede ser una técnica valiosa para crear animaciones e interacciones complejas.
Veamos ahora algunos ejemplos de múltiples transformaciones. Puede utilizar el siguiente código para la transformación de una imagen.
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 10px;
}
.box {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(110deg) translate(45px, -160px);
}
h1 {
color: #000000;
}
</style>
</head>
<body>
<h1>
CSS Multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="box"></div>
</body>
</html>
En el código anterior, usamos la función CSS transformar: rotar (110 grados) traducir (45 px, -160 px) para la transformación de la imagen. Este código CSS rotará la imagen hasta 110 grados.
Entonces, al usar el código anterior, puede aplicarlo para transformar cualquier imagen.
Aplique múltiples transformaciones especificando múltiples transformas en CSS
Otra forma de usar múltiples “transformaciones” es especificar cada “transformación” individualmente.
Por ejemplo:
transform: rotate(45deg);
transform: scale(2);
Aplique múltiples transformaciones especificando múltiples transform-origin en CSS
También puede utilizar la propiedad transform-origin para cambiar el punto de origen de la transformación. Por ejemplo:
transform-origin: 50% 50%;
transform-origin: bottom right;
Este cambiaría el punto de origen al centro del elemento o la esquina inferior derecha del componente.
Aplicar Transformaciones Múltiples Usando Clases Anidadas en CSS
Hay otra forma de aplicar la transformación CSS. El siguiente es un código CSS, pero crearemos dos clases anidadas, transformación externa e transformación interna, para aplicar múltiples transformaciones CSS.
Este código también dará nuestra salida deseada.
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #000000;
}
.outer-transform {
transform: translate(150px, 180px);
}
.inner-transform {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(-150deg);
}
</style>
</head>
<body>
<h1>
CSS multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="outer-transform">
<div class="inner-transform"></div>
</div>
</body>
</html>
Producción:
Conclusión
Nos complace informarle que puede aplicar varias transformaciones a un elemento en CSS. Puede tener un div que se gira y se traslada simultáneamente e incluso un elemento se gira y se traslada en diferentes direcciones.
Las transformaciones son una poderosa herramienta para crear efectos visuales en elementos HTML. CSS admite múltiples transformaciones, lo que permite una mayor variedad de efectos.
Cuando se usan juntas, las transformaciones pueden crear efectos visuales realmente sorprendentes.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn