Przykład
Obracanie <div> elementu:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość przekształcić zastosowanie transformacji 2D lub 3D do elementu. Ta właściwość pozwala na obracanie, skalowanie, przesuwanie, pochylanie itd elementy.
Aby lepiej zrozumieć właściwości transform, zobaczyć demo .
| Domyślna wartość: | none |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes. Read about animatable Try it |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.transform="rotate(7deg)" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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- |
Składnia
transform: none|transform-functions|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| none | Określa, że nie powinno być przekształcenie | Graj " |
| matrix( n,n,n,n,n,n ) | Określa 2D transformacji przy użyciu matrycy sześć wartościami | Graj " |
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Określa transformacji 3D z użyciem macierzy 4x4 z 16 wartościami | |
| translate( x,y ) | Definiuje tłumaczenie 2D | Graj " |
| translate3d( x,y,z ) | Definiuje tłumaczenie 3D | |
| translateX( x ) | Definiuje tłumaczenie, tylko przy użyciu wartości dla osi X | Graj " |
| translateY( y ) | Określa tłumaczenie, tylko przy użyciu wartości na osi Y | Graj " |
| translateZ( z ) | Określa tłumaczenie 3D tylko przy użyciu wartości dla osi | |
| scale( x,y ) | Definiuje skalę transformacji 2D | Graj " |
| scale3d( x,y,z ) | Definiuje skalę transformacji 3D | |
| scaleX( x ) | Definiuje transformacji skali, dając wartość dla osi X | Graj " |
| scaleY( y ) | Definiuje transformacji skali, dając wartość dla osi Y. | Graj " |
| scaleZ( z ) | Definiuje transformacji skali 3D podając wartość dla osi | |
| rotate( angle ) | Określa obrót 2D, kąt jest określony w parametrze | Graj " |
| rotate3d( x,y,z,angle ) | Określa obrót 3D | |
| rotateX( angle ) | Określa obrót 3D wzdłuż osi X | Graj " |
| rotateY( angle ) | Określa obrót 3D wzdłuż osi Y. | Graj " |
| rotateZ( angle ) | Określa obrót 3D wzdłuż osi | Graj " |
| skew( x-angle,y-angle ) | Definiuje transformacji 2D pochylać wzdłuż osi X i osi Y | Graj " |
| skewX( angle ) | Definiuje transformacji 2D pochylać wzdłuż osi X | Graj " |
| skewY( angle ) | Definiuje transformacji 2D pochylać wzdłuż osi Y | Graj " |
| perspective( n ) | Definiuje widok perspektywiczny dla 3D przekształconego elementu | |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Obrazy rzucone na stół
Ten przykład pokazuje, jak utworzyć "polaroid" zdjęcia i obracać zdjęcia.
Podobne strony
Kurs CSS: CSS 2D Transformacje
Kurs CSS: CSS 3D Transformacje
HTML DOM referencyjny: transform property