CSS3 trasformare immobili
Esempi
Rotazione elemento div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Prova »
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.
Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.
属性 | |||||
---|---|---|---|---|---|
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- |
Attributo definizioni e le istruzioni
2D Transform proprietà viene applicata all'elemento o la conversione 3D. Questa proprietà consente di elementi di rotazione, zoom, spostamento, inclinazione, e così via.
Per capire meglio le proprietà di trasformazione, consultare l'istanza in linea .
predefinito: | nessuno |
---|---|
ereditarietà: | no |
versione: | CSS3 |
sintassi JavaScript: | object .style.transform = "Ruota (7deg)" |
grammatica
transform:none | Transform-funzioni;
valore | descrizione |
---|---|
nessuno | Definizione non converte. |
matrice (n, n, n,n, n, n) | Definire conversione 2D, utilizzando una matrice di sei valori. |
Matrix3D (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | conversione in 3D definita utilizzando 16 valori matrice 4x4. |
translate(x, y) | Definire la conversione 2D. |
translate3d(x, y, z) | Definire la conversione 3D. |
translateX(x) | Definizione di conversione, ma con il valore di X-asse. |
translateY(y) | Definizione di conversione, ma con il valore di Y. |
translateZ(z) | Definire conversione 3D, ma con il valore dell'asse Z. |
scala (x [, y]?) | Definire trasformazione scala 2D. |
scale3d(x, y, z) | Definire trasformazione scala 3D. |
scaleX(x) | Impostando il valore dell'asse X per definire la trasformazione di scala. |
scaleY(y) | Impostando il valore dell'asse Y per definire la trasformazione di scala. |
scaleZ(z) | Per definire la trasformazione scala 3D impostando il valore dell'asse Z. |
Ruota(angolo) | Definire 2D ruotato un angolo predeterminato nell'argomento. |
Ruota3D (x, y, z,angolo) | Definire rotazione 3D. |
rotateX(angolo) | 3D X è definito lungo l'albero. |
RotateY(angolo) | asse 3D Y è definito lungo la rotazione. |
rotateZ(angolo) | 3D asse Z è definito lungo la rotazione. |
skew (x-angle, y-angolo) | Definito lungo la 2D X e Y skew trasformazione. |
skewX(angolo) | 2D asse X è definito lungo l'inclinazione della conversione. |
skewY(angolo) | Definito lungo l'asse Y skew trasformazione 2D. |
prospettiva(n) | elemento di conversione 3D per definire una vista prospettica. |
Altri esempi
Ruotare un'immagine
Questo esempio dimostra come creare un "Polaroid" foto e ruotare le immagini.