În designul și dezvoltarea paginilor web moderne, întâlnim frecvent situații în care dorim să afișăm un element grafic sau un bloc de text înclinat – spre exemplu, o etichetă de promoție, o insignă decorativă sau un titlu rotit la un unghi de 30 de grade. Ce soluții avem la dispoziție?
În trecut, dezvoltatorii erau nevoiți să recurgă la soluția clasică: randarea textului ca imagine rotită într-un editor grafic. Această metodă creștea timpul de încărcare al paginii și făcea conținutul inaccesibil pentru motoarele de căutare.
Odată cu specificațiile CSS3, putem manipula elementele DOM direct din foaia de stil, fără a utiliza imagini suplimentare sau librării JavaScript greoaie.
Sintaxa standard și prefixele vendor
Pentru a asigura o compatibilitate deplină atât cu browserele moderne, cât și cu versiunile legacy (care la momentul introducerii standardului CSS3 necesitau prefixe specifice motoarelor de randare), este recomandat să declarăm proprietatea standard transform alături de prefixele vendor aferente:
[css]
/* Sintaxa standard W3C */
transform: rotate(30deg);
/* Prefix pentru versiuni vechi de WebKit (Google Chrome, Apple Safari) */
-webkit-transform: rotate(30deg);
/* Prefix pentru versiuni vechi de Gecko (Mozilla Firefox) */
-moz-transform: rotate(30deg);
/* Prefix pentru versiuni vechi de Opera (Presto) */
-o-transform: rotate(30deg);
/* Prefix pentru Internet Explorer 9 (Trident) */
-ms-transform: rotate(30deg);
[/css]
Combinarea rotației cu alte transformări 2D
Proprietatea transform este extrem de puternică deoarece permite înlănțuirea mai multor funcții de transformare pe o singură linie, cum ar fi înclinarea (skew) sau translația (translate):
[css]
/* Rotație combinată cu înclinare și translație */
transform: rotate(120deg) skewX(25deg) translateX(150px);
-webkit-transform: rotate(120deg) skewX(25deg) translateX(150px);
-moz-transform: rotate(120deg) skewX(25deg) translateX(150px);
[/css]
Folosirea transformărilor native CSS3 asigură o randare fluidă grație accelerării hardware asigurate de procesorul grafic (GPU), menținând în același timp textul complet selectabil și ușor de tradus sau indexat.
