Esempio
Rotazione di una <div> elemento:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Prova tu stesso " Definizione e utilizzo
La proprietà transform applica una trasformazione 2D o 3D a un elemento. Questa proprietà consente di ruotare, scalare, spostare, inclinazione, ecc, elementi.
Per capire meglio la proprietà transform, visualizzare una demo .
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.transform="rotate(7deg)" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- | 10.0 9,0 -MS- | 16,0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16,0 10.0 -moz- | 9.0 4.0 -webkit- |
Sintassi
transform: none|transform-functions|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| none | Definisce che ci dovrebbe essere nessuna trasformazione | Gioca " |
| matrix( n,n,n,n,n,n ) | Definisce una trasformazione 2D, utilizzando una matrice di sei valori | Gioca " |
| 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 | Gioca " |
| translate3d( x,y,z ) | Definisce la traduzione 3D | |
| translateX( x ) | Definisce una traduzione, utilizzando solo il valore per l'asse X | Gioca " |
| translateY( y ) | Definisce una traduzione, utilizzando solo il valore per l'asse Y | Gioca " |
| translateZ( z ) | Definisce traduzione 3D, utilizzando solo il valore per l'asse Z | |
| scale( x,y ) | Definisce una trasformazione in scala 2D | Gioca " |
| scale3d( x,y,z ) | Definisce una trasformazione in scala 3D | |
| scaleX( x ) | Definisce una trasformazione scala dando un valore per l'asse X | Gioca " |
| scaleY( y ) | Definisce una trasformazione scala dando un valore per l'asse Y | Gioca " |
| 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 | Gioca " |
| rotate3d( x,y,z,angle ) | Definisce una rotazione 3D | |
| rotateX( angle ) | Definisce una rotazione 3D lungo l'asse X | Gioca " |
| rotateY( angle ) | Definisce una rotazione 3D lungo l'asse Y | Gioca " |
| rotateZ( angle ) | Definisce una rotazione 3D lungo l'asse Z | Gioca " |
| skew( x-angle,y-angle ) | Definisce un un'inclinazione 2D lungo l'asse X e l'asse Y | Gioca " |
| skewX( angle ) | Definisce un un'inclinazione 2D lungo l'asse X | Gioca " |
| skewY( angle ) | Definisce un un'inclinazione 2D lungo l'asse Y | Gioca " |
| 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à |
Altri esempi
Immagini gettato sul tavolo
Questo esempio dimostra come creare "polaroid" le immagini e ruotare le immagini.
Pagine correlate
Tutorial CSS: CSS 2D Transforms
Tutorial CSS: CSS 3D Transforms
Di riferimento HTML DOM: transform property