Exemplu
Rotirea unui <div> Element:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Încearcă - l singur » Definiție și utilizare
Transform Proprietatea se aplică o transformare 2D sau 3D la un element. Această proprietate vă permite să se rotească, la scară, muta, oblic, etc, elemente.
Pentru a înțelege mai bine proprietatea transforma, o demonstrație .
| Valoare implicită: | none |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transform=" rotate(7deg) " Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| transform (2D) | 36,0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 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 4.0 -webkit- |
Sintaxă
transform: none| Valori de proprietate Valoare Descriere Joaca-l none Definește că ar trebui să existe nici o transformare Joaca - l » matrix( n,n,n,n,n,n ) Definește o transformare 2D, folosind o matrice de șase valori Joaca - l » matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) Definește o transformare 3D, folosind o matrice 4x4 a 16 valori translate( x,y ) Definește o traducere 2D Joaca - l » translate3d( x,y,z ) Definește o traducere 3D translateX( x ) Definește o traducere, folosind doar valoarea pentru axa X Joaca - l » translateY( y ) Definește o traducere, folosind doar valoarea pentru axa Y Joaca - l » translateZ( z ) Definește o traducere 3D, folosind doar valoarea pentru axa Z scale( x,y ) Definește o transformare scara 2D Joaca - l » scale3d( x,y,z ) Definește o transformare scară 3D scaleX( x ) Definește o transformare scara prin acordarea unei valori pentru axa X Joaca - l » scaleY( y ) Definește o transformare scara prin acordarea unei valori pentru axa Y Joaca - l » scaleZ( z ) Definește o transformare la scară 3D oferind o valoare pentru axa Z rotate( angle ) Definește o rotație 2D, unghiul este specificat în parametrul Joaca - l » rotate3d( x,y,z,angle ) Definește o rotație 3D rotateX( angle ) Definește o rotație 3D de-a lungul axei X- Joaca - l » rotateY( angle ) Definește o rotație 3D de-a lungul axei Y Joaca - l » rotateZ( angle ) Definește o rotație 3D de-a lungul axei Z Joaca - l » skew( x-angle,y-angle ) Definește o transformare 2D oblic de-a lungul axelor X și axa Y Joaca - l » skewX( angle ) Definește o transformare 2D oblic în lungul axei X Joaca - l » skewY( angle ) Definește o transformare 2D oblic de-a lungul axei Y Joaca - l » perspective( n ) Definește o vedere în perspectivă pentru un element transformat 3D initial Setează această proprietate la valoarea implicită. Citiți despre inițială inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Imaginile aruncate pe masa
Acest exemplu demonstrează modul de a crea "polaroid" imagini și roti imaginile.
Pagini similare
Tutorial CSS: CSS 2D Transformări
Tutorial CSS: CSS 3D Transformări
HTML DOM de referință: transform property