La proprietà CSS transform consente di ruotare, ridimensionare, inclinare o traslare un elemento.
Questo tipo di trasformazioni possono operare in uno spazio bidimensionale o tridimensionale.
Per fornirti un esempio della potenzialità di questo strumento, ho deciso di sviluppare una piccola dimostrazione che utilizza esclusivamente HTML + CSS, senza far uso di JavaScript.
Questa dimostrazione è stata costruita principalmente utilizzando CSS transform e CSS animation.
Se vuoi, puoi mettere in pausa la rotazione del cubo posizionando il cursore del mouse sopra di esso.
Indice
CSS transform: cosa è
CSS transform è una proprietà che accetta come valore delle funzioni che operano delle trasformazioni geometriche.
Quelle più intuitive, che ho utilizzato per implementare l’esempio che trovi ad inizio della pagina, ho utilizzato le funzioni:
- rotateX(quanti deg)
- rotateY(quanti deg)
- rotateZ(quanti deg)
- translateX(quanto spazio)
- translateY(quanti spazio)
- translateZ(quanti spazio)
Come puoi intuire, rotateX() opera una rotazione rispetto all’asse delle X dei gradi forniti come argomento.
Analogamente, translateY() opera una traslazione rispetto all’asse delle Y della quantità di spazio fornito.
Ecco una lista completa delle funzioni disponibili:
transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);
Per una lista completa delle funzioni disponibili, puoi visitare la documentazione di CSS transform di MDN.
CSS transform: come si usa
Oltre alle funzioni citate nella sezione precedente, sono presenti altre proprietà che vengono utilizzato congiuntamente a transform.
In particolare, nell’esempio che trovi nella parte alta della pagina, ho utilizzato la proprietà transform-style: preserve-3d.
In questo modo, i figli dell’elemento “cubo” che contiene ogni faccia saranno posizionati nello spazio tridimensionale.
Altre proprietà utili da conoscere:
- transform-box
- transform-origin
CSS transform: un video dimostrativo
In questo video implemento l’esempio mostrato sopra.
Se questo video ti fosse sembrato interessante, potresti valutare di iscriverti al canale.
Approfondimenti
Se sei arrivat* fino a qui, probabilmente ti interessano contenuti relativi a CSS e allo sviluppo web.
Eccone alcuni:
- CSS media queries: cosa sono e come utilizzarle
- Selettori CSS: una guida pratica con esempi
- Selettore CSS elemento: ottenerlo con Chrome DevTools
- Promise JavaScript: definizione ed esempio pratico
- window load JavaScript: come funziona?
Conclusioni
In questo articolo hai avuto modo di scoprire l’utilizzo della proprietà transform di CSS.
Inoltre, hai avuto modo di valutare i possibili valori da fornire, anche grazie ad un esempio pratico.
