Nueva sintaxis de las transformaciones Css: rotate, translate y scale ahora como propiedades 4.8.15
La nueva forma de declarar transformaciones Css sencillas: las palabras clave rotate, translate y scale ahora son también propiedades Css
Nueva sintaxis de las transformaciones Css: rotate, translate y scale ahora como propiedades
Hay novedades en el desarrollo del módulo Css que desarrolla las transformaciones.
A la forma tradicional
de declararlas con la propiedad transform complementada en su valor con al menos una de las cuatro palabras claves rotate translate scale y/o skew se suma el poder declarar las tres primeras transformaciones como propiedad, no como funciones en el valor de transform.
Todo es demasiado reciente, así que no busques soporte en ninguna de las versiones estables de los navegadores, aunque leo que alguno en sus versiones en desarrollo
(como Canary) ya lo hacen previa activación por el usuario.
Las propiedades Css rotate, translate y scale
La nueva sintaxis usando las palabras clave rotate, translate y transform
como propiedades y no nombre de funciones de la propiedad transform sería así:
.el-1 {
rotate: 20deg;
}
.el-2 {
translate: 50%;
}
.el-3 {
scale: -1;
}
Las tres propiedades admiten hasta 3 valores separados por espacio en blanco correspondientes a los tres ejes X-Y-Z.
La información la tienes en el documento CSS Transform Module Level 2 con status editors’ draft
.
Creo que esta nueva formulación está pensada para transformaciones sencillas y así evitar, entre otras cosas, que no se reseteen al valor inicial transformaciones previas por no declararse:
a img {
transform: translate-X(-50%) scale(.9);
}
a:hover img {
transform: scale(1.1);
}
En la imagen al :hover sobre el enlace el valor de la traslación pasaría a 0. En el ejemplo no supone mayor problema el declararla de nuevo, pero en las transformaciones complejas usadas en @Keyframes significa tener que declarar en cada frame (X%) todas, las que cambian y las que permanecen.
Una cuestión pendiente es si la secuencia de ejecución depende de su orden de declaración en la regla o es independiente de él.
Aquí la propuesta inicial del equipo de Google al Grupo del W3c.
Un vídeo de un usuario de twitter mostrando su funcionamiento en Chrome Canary
Independent CSS Transform properties (translate, rotate, and scale) are available in Canary behind flag pic.twitter.com/KKVWF6LVKT
— Šime Vidas (@simevidas) agosto 2, 2015
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso