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
![Exemple](/images/tryitimg.gif)
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