Negli script #101 e #103 abbiamo analizzato le trasformazioni CSS3 relative a rotazione e scale.
In questo script vedremo come applicare la traslazione, che ci consente di spostare l'origine di un elemento, date le opportune coordinate
.transform { -ms-transform: translate(20px, 120px); -webkit-transform: translate(20px, 120px); -moz-transform: translate(20px, 120px); -o-transform: translate(20px, 120px); transform: translate(20px, 120px); }
L'effetto ottenuto è visibile in questa immagine:
Grazie ai vendor prefix, il supporto è offerto da IE9+, Chrome 12+, Mozilla 3.5+, Safari 3.1+ e Opera 10.5+.
Per approfondimenti:
Trasformazioni CSS3 in HTML5: la rotazione
https://www.html5italia.com/script/101/Trasformazioni-CSS3-HTML5-Rotazione.aspx
Trasformazioni CSS3 in HTML5: la scale
https://www.html5italia.com/script/103/Trasformazioni-CSS3-HTML5-Scale.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni sui blob con Azure Storage Actions
Eseguire attività basate su eventi con Azure Container Jobs
Hosting di componenti WebAssembly in un'applicazione Blazor static
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Eseguire una GroupBy per entity in Entity Framework
Utilizzare le collection expression in C#
Evitare la command injection in un workflow di GitHub
Ricevere avvisi su metriche dei server Azure Arc
Criptare la comunicazione con mTLS in Azure Container Apps
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Aggiungere interattività lato server in Blazor 8