English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS transform si applica alle trasformazioni 2D o 3D degli elementi. Questa proprietà ti permette di ruotare, ingrandire, spostare, inclinare, traslare, ruotare, ingrandire e altro ancora gli elementi in due o tre dimensioni.
La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso dell'attributo nel script JavaScript.
| Valore predefinito: | none |
|---|---|
| Applicabile a: | Elementi trasformabili |
| Ereditarietà: | No |
| Animabile: | Sì.Riferimento: Attributi animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | oggetto.style.transform="rotate(7deg)" |
La sintassi di questo attributo è la seguente:
transform: [ transform-function ] 1 o più valori | none | initial | inherit
Di seguito è riportato un esempio di come utilizzare l'attributo transform.
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px);
}Testa per vedere‹/›La tabella seguente descrive i valori di questo attributo.
| Valore | Descrizione |
|---|---|
| translate(tx,ty) | Sposta l'elemento lungo gli assi X e Y di una quantità data. |
| translate3d(tx,ty,tz) | Sposta l'elemento lungo gli assi X, Y e Z di una quantità data. |
| translateX(tx) | Sposta l'elemento lungo l'asse X di una quantità data. |
| translateY(ty) | Sposta l'elemento lungo l'asse Y di una quantità data. |
| translateZ(tz) | Sposta l'elemento lungo l'asse Z di una quantità data. |
| rotate(a) | Ruota l'elemento attorno all'origine dell'elemento specificato con l'angolo specificato dall'attributo transform-origin. |
| rotate3d(x,y,z, a) | Ruota l'elemento nel 3D spazio attorno alla direzione vettoriale [x, y, z], secondo l'angolo specificato nell'ultimo parametro. |
| rotateX(a) | Ruota l'elemento attorno all'asse X di un angolo dato. |
| rotateY(a) | Ruota l'elemento attorno all'asse Y di un angolo dato. |
| rotateZ(a) | Ruota gli elementi attorno all'asse Z di un angolo dato. |
| scale(sx,sy) | Scala la larghezza e l'altezza dell'elemento di una quantità specificata. La funzione scale(1,1) non è valida. |
| scale3d(sx,sy,sz) | Scala l'elemento lungo gli assi X, Y e Z di una quantità specificata. La funzione scale3d(1,1,1) non è valida. |
| scaleX(sx) | Scala l'elemento lungo l'asse X. |
| scaleY(sy) | Scala l'elemento lungo l'asse Y. |
| scaleZ(sz) | Scala l'elemento lungo l'asse Z. |
| skew(ax,ay) | Fare inclinare l'elemento lungo gli assi X e Y di un angolo specificato. |
| skewX(ax) | Fare inclinare l'elemento lungo l'asse X di un angolo specificato. |
| skewY(ay) | Fare inclinare l'elemento lungo l'asse Y di un angolo specificato. |
| matrix(n,n,n,n,n,n) | Specificare la trasformazione 2D in forma di matrice di trasformazione che contiene sei valori. |
| matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | Specificare la trasformazione 3D in forma di matrice di trasformazione 4x4 di 16 valori. |
| perspective(length) | Definire la prospettiva dell'elemento di trasformazione 3D. Di solito, con l'aumento del valore di questa funzione, l'elemento appare più lontano dal visitatore. |
| none | Specificare di non applicare nessuna trasformazione. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato adotta il valore dell'attributo transform del suo elemento padre. |
La compatibilità del browser del属性transform, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Trasformazioni 2D CSS3,Trasformazioni 3D CSS3
Proprietà correlate:backface-visibility,perspective,perspective-origin,transform-origin,transform-style.