EstiloSh1t
Entonces, tengo un div, como este:
<div class="rotate-90"></div>
y el css:
.rotate-90
{
transform: rotate(90deg);
}
y quiero agregar otra clase al div, llamada “escala-2”, así:
<div class="rotate-90 scale-2"></div>
.scale-2
{
transform: scale(2);
}
pero cuando trato de combinarlos, la segunda clase anula la primera, por lo que solo obtengo un div escalado y no rotado. Entonces, ¿cómo puedo combinar las transformaciones sin escribir el código dos veces o combinar los códigos de las clases?
Gracias 🙂
Sebastián G. Marinescu
Actualización 2022
A fines del año pasado, el W3C publicó el borrador de trabajo para “Módulo de Transformaciones CSS Nivel 2“.
Esta especificación agrega nuevas funciones y propiedades de transformación para transformaciones tridimensionales, y funciones de conveniencia para transformaciones simples.
agrega “Transformaciones individuales“:
Como la compatibilidad con navegadores supera el 85 %, debería ser utilizable, si su proyecto no tiene que admitir navegadores antiguos.
Así que deberías poder hacer esto a partir de ahora:
.rotate-90
{
rotate: 90deg;
}
.scale-2
{
scale: 2;
}
Aquí hay un buen video de introducción: “¡Una nueva forma de hacer transformaciones CSS!de Kevin Powell.
Respuesta original:
Las reglas de transformación se anulan, como cualquier otra regla.
Sin embargo, puede combinar el transforma en una regla:
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
Si combinar las dos clases no es tu deseo (que no entiendo totalmente, pero respeto)y si su marco solo tiene estos dos efectos, entonces podría usar zoom para la regla de escala:
.scale-2 {
zoom: 2;
}
-
Él / ella no quiere combinar los atributos.
– rica
22 de agosto de 2016 a las 12:31
-
@Era no hay otra forma de hacer esto. También OP ya está combinando las clases:
class="rotate-90 scale-2"– Entonces, ¿por qué no debería él/ella adaptar su CSS en consecuencia y correctamente?– Sebastián G. Marinescu
22 de agosto de 2016 a las 12:34
-
@SebastianG.Marinescu, estoy trabajando en un marco CSS pequeño, así que quiero crear clases y usarlas cuando sea necesario. No quiero que mi FW anule otro código u otro código para anular mi código FW. Tampoco quiero combinar clases, quiero que cada clase haga lo que debe hacer.
– EstiloSh1t
22 de agosto de 2016 a las 12:41
-
@StyleShit: entiendo. Pero debe comprender que esto no es posible en el caso de la propiedad de transformación. O usas
transformsolo para un efecto, o combinas todos sus efectos de transformación correctamente para cada caso/combinación que pueda haber. En el caso de que su marco solo tenga estos dos efectos, entonces podría intentar usarzoom: 2para tuscale-2-clase.– Sebastián G. Marinescu
22 de agosto de 2016 a las 12:50
-
@StyleShit: También te equivocas: combinar las clases en una regla no lo es “anulando otro código”pero reconociendo y corrigiendo sus reglas.
– Sebastián G. Marinescu
22 de agosto de 2016 a las 12:59
porque estas usando transform propiedad de nuevo y su anulación anterior.
Puedes usar ambos en una transformación como esta
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
La propiedad de transformación debe usarse con prefijo para que funcione en todos los navegadores como este
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
-moz-transform: rotate(90deg) scale(2);
-ms-transform: rotate(90deg) scale(2);
-webkit-transform: rotate(90deg) scale(2);
-o-transform: rotate(90deg) scale(2);
}
-
Él / ella no quiere combinar los atributos.
– rica
22 de agosto de 2016 a las 12:31
-
without writing the code twice or combining the classes codes?– rica
22 de agosto de 2016 a las 12:32