Esempio
Ruotare un elemento div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Prova tu stesso " Definizione e l'utilizzo
La proprietà transform applica una trasformazione 2D o 3D a un elemento. Questa proprietà consente di ruotare, scalare, spostare, skew, ecc, elementi.
Supporto browser
La proprietà transform è supportata in Internet Explorer 10 e Firefox.
Internet Explorer 9 supporta un'alternativa, la proprietà msTransform (2D transforms only) .
Opera, Chrome e Safari supporta in alternativa, la proprietà WebkitTransform (3D e 2D trasforma).
Sintassi
Restituire la proprietà transform:
object .style.transform Impostare la proprietà transform:
object .style.transform="none| I valori delle proprietà Valore Descrizione none Definisce che ci dovrebbe essere alcuna trasformazione matrix( n,n,n,n,n,n ) Definisce una trasformazione 2D, utilizzando una matrice di sei valori matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) Definisce una trasformazione 3D, utilizzando una matrice 4x4 di 16 valori translate( x,y ) Definisce la traduzione 2D translate3d( x,y,z ) Definisce la traduzione 3D translateX( x ) Definisce una traduzione, utilizzando solo il valore per l'asse X translateY( y ) Definisce una traduzione, utilizzando solo il valore per l'asse Y translateZ( z ) Definisce la traduzione in 3D, utilizzando solo il valore per l'asse Z scale( x,y ) Definisce una trasformazione scala 2D scale3d( x,y,z ) Definisce una trasformazione scala 3D scaleX( x ) Definisce una trasformazione scala dando un valore per l'asse X scaleY( y ) Definisce una trasformazione scala dando un valore per l'asse Y scaleZ( z ) Definisce una trasformazione scala 3D dando un valore per l'asse Z rotate( angle ) Definisce una rotazione 2D, l'angolo viene specificato nel parametro rotate3d( x,y,z,angle ) Definisce una rotazione 3D rotateX( angle ) Definisce una rotazione 3D lungo l'asse X rotateY( angle ) Definisce una rotazione 3D lungo l'asse Y rotateZ( angle ) Definisce una rotazione 3D lungo l'asse Z skew( x-angle,y-angle ) Definisce un un'inclinazione 2D lungo l'asse X e l'asse Y skewX( angle ) Definisce un un'inclinazione 2D lungo l'asse X skewY( angle ) Definisce un un'inclinazione 2D lungo l'asse Y perspective( n ) Definisce una vista in prospettiva di un elemento 3D trasformato initial Consente di impostare questa proprietà al suo valore di default. Leggi iniziale inherit Eredita questo immobile dal suo elemento genitore. Leggi su erediterà
Dettagli tecnici
Valore di default: nessuna Valore di ritorno: A String, che rappresenta la proprietà transform di un elemento CSS Version CSS3
Pagine correlate
Di riferimento CSS: transform property
<Stile di oggetto