CSS translate
La proprietà CSS4 translate sposta un elemento lungo gli assi X e Y
translate
è una proprietà individuale moderna che consente di traslare un elemento direttamente, senza dover usare la funzione transform: translate()
.
Questo approccio migliora la leggibilità del codice e rende possibile l'animazione indipendente delle singole trasformazioni CSS (come rotate
, scale
e translate
).
Sintassi
Significato dei valori principali:
-
lunghezze: ad esempio
20px
,-10em
per traslare l’elemento su uno degli assi. -
percentuali: relative alle dimensioni dell'elemento stesso (
50%
,100%
). -
none: (valore di default) indica nessuna traslazione.
-
z (facoltativo): supportato solo in ambienti 3D e da browser che lo implementano (come alcuni motori grafici).
Nota: Funziona solo nei browser che supportano CSS Transforms Level 2 (moderno Chrome, Edge, Firefox).
Esempio proprietà: translate
Codice Esempio: translate

.box-container {
display: flex;
gap: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #c678dd;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.box-translate-x {
translate: 50px 0;
}
.box-translate-xy {
translate: 30px 20px;
}
Contenuto Esempio: translate
Esempio di utilizzo di translate
In questo esempio, due box vengono spostati orizzontalmente e verticalmente utilizzando la proprietà translate
.
CSS e HTML per il posizionamento con translate
:
<style>
.box {
width: 100px;
height: 100px;
background-color: #c678dd;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.box-translate-x {
translate: 50px 0;
}
.box-translate-xy {
translate: 30px 20px;
background-color: #7bdd78;
}
</style>
<div class="box-container">
<div class="box box-translate-x">X</div>
<div class="box box-translate-xy">XY</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.