CSS
HTML
JavaScript
PHP
Coming Soon
Generatori
Varie & Old

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

translate: traslazione-x traslazione-y [traslazione-z];

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

CODE: CSSpreleva codice
  1. .box-container {
  2.   display: flex;
  3.   gap: 20px;
  4. }
  5.  
  6. .box {
  7.   width: 100px;
  8.   height: 100px;
  9.   background-color: #c678dd;
  10.   color: white;
  11.   font-weight: bold;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15. }
  16.  
  17. .box-translate-x {
  18.   translate: 50px 0;
  19. }
  20.  
  21. .box-translate-xy {
  22.   translate: 30px 20px;
  23. }

Contenuto Esempio: translate

Esempio di utilizzo di translate

In questo esempio, due box vengono spostati orizzontalmente e verticalmente utilizzando la proprietà translate.


X
XY

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.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies