English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manuale di riferimento CSS

Regole CSS (RULES)

Completo di CSS

Metodo di utilizzo e esempio di transform-origin CSS3

L'attributo transform-Origin consente di modificare la posizione dell'elemento trasformato.

Gli elementi di trasformazione 2D possono modificare l'asse X e Y dell'elemento. Gli elementi di trasformazione 3D possono anche modificare l'asse Z dell'elemento.　

La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso in script JavaScript.

Valore predefinito:50% 50% 0
Applicabile a:Elementi trasformabili
Ereditarietà:No
Animabile:Sì.Si prega di riferimento Proprietà animazione.
Versione: Nuova funzionalità CSS3
Sintassi JavaScript:oggetto.style.transformOrigin="20@%"

Sintassi dell'uso di transform-origin

La sintassi di questo attributo è la seguente:

transform-origin: x-position | y-position | z-position | initial | inherit

Attenzione:Se viene specificato solo un valore per l'attributo transform-origin, si assume che il secondo valore sia center, che corrisponde al valore del 50%.

Il seguente esempio dimostra come utilizzare l'attributo transform-origin.

img {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin: 25% bottom;
　　　　/* Firefox */
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin: 25% bottom;
　　　　/* IE 9 */
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin: 25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin: 25% bottom;
}
Testa per vedere <›/›

Attenzione:Se almeno uno dei due valori non è una parola chiave, il primo valore rappresenta la posizione orizzontale (o offset) dell'origine della trasformazione, il secondo valore rappresenta la posizione verticale (o offset) dell'origine della trasformazione.

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

ValoreDescrizione
x-position

Rappresenta la posizione orizzontale (o offset) dell'origine della trasformazione. Può avere uno dei seguenti valori:

  • percentage - definisce l'offset rispetto alla larghezza dell'elemento.

  • length - definisce l'offset dell'unità di lunghezza utilizzata.

  • left - uguale al 0% o zero larghezza.

  • center - uguale al 50% della larghezza della scatola o alla metà.

  • right - uguale al 100% o alla larghezza intera della scatola.

y-position

Rappresenta la posizione verticale (o offset) dell'origine della trasformazione. Può avere uno dei seguenti valori:

  • percentage - definisce l'offset rispetto all'altezza dell'elemento.

  • length - definisce l'offset dell'unità di lunghezza utilizzata.

  • top - uguale al 0% o zero altezza.

  • center - uguale al 50% dell'altezza della scatola o alla metà.

  • bottom - uguale al 100% o all'altezza intera della scatola.

z-positionunlengthValore, che descrive la distanza dall'origine Z=0 (perTransformazioni 3D). I valori percentuali non sono validi.
initialImposta questa proprietà al suo valore predefinito.
inheritSe specificato, l'elemento correlato utilizza il valore della proprietà transform-origin dell'elemento padre.

Compatibilità del browser

La compatibilità del browser del proprietà transform-origin, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

  • Firefox (2D) 3.5 +, (3D) 10+ -moz-, 16 +

  • Chrome (2D) 4 +, (3D) 12+ -webkit-, 36 +

  • Internet Explorer (2D) 9 -ms-, 10+

  • Apple Safari (2D) 3.2 +, (3D) 4+ -webkit-

  • Opera (2D) 10.5+ -o 　 -,
    (2D)(3D) 15+ 　 -webkit-, 23+

Leggi di più

Ecco la guida da consultare:Transformazioni 2D del CSS3,Transformazioni 3D del CSS3

Proprietà correlate:backface-visibility,perspective,perspective-origin,transform,transform-style.

Proprietà transform-style CSS3Proprietà transform CSS3