CSS3 przekształcenia własności
Przykłady
Obrót elementu 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 */
}
Spróbuj »
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Atrybut definicje i instrukcje
2D Transform właściwość jest stosowana do elementu lub konwersji 3D. Ta właściwość pozwala na elementy obracać, powiększać, przesuwać, pochylać, i tak dalej.
Aby lepiej zrozumieć właściwości transformacji patrz wystąpienie internetowego .
| Domyślnie: | żaden |
|---|---|
| Dziedziczenie: | nie |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.transform = "rotate (7deg)" |
gramatyka
transform:none | transformacją funkcji;
| wartość | opis |
|---|---|
| żaden | Definicja nie konwertuje. |
| matrycy (N, N, N,N, N, N) | Określić konwersji 2D, przy użyciu matrycy sześć wartości. |
| Matrix3D (N, N, N,N, N, N, N, N, N, N, N, N, N, N, N, N) | Konwersja 3D zdefiniowane za pomocą 16 wartości macierzy 4x4. |
| translate(x, y) | Zdefiniuj konwersję 2D. |
| translate3d(x, y, z) | Definiowanie konwersji 3D. |
| translateX(x) | Określenie przemiany, a przy wartości X osi. |
| translateY(y) | Określenie przemiany, ale wartości Y osi. |
| translateZ(Z) | Określić konwersji 3D, ale z wartością osi Z. |
| scale (x [y]?) | Określ skalę transformacji 2D. |
| scale3d(x, y, z) | Określ skalę transformacji 3D. |
| scaleX(x) | Ustawienie wartości na osi X w celu zdefiniowania transformacji skali. |
| scaleY(y) | Po ustawieniu wartości osi Y, aby określić transformacji skali. |
| scaleZ(Z) | Do określenia transformacji skalę 3D przez ustawienie wartości osi Z. |
| rotate(kąt) | Definiowanie 2D obrócony o określony kąt w argumencie. |
| rotate3d (x, y, z,kąt) | Określ obrót 3D. |
| rotateX(kąt) | 3D X jest wyznaczony wzdłuż wału. |
| rotateY(kąt) | Oś Y jest zdefiniowane 3D po rotacji. |
| rotateZ(kąt) | 3D oś jest określona wzdłuż obrotu. |
| pochylać (x-angle, ykąt) | Zdefiniowane wzdłuż 2D X i transformacji skośnej osi Y. |
| skewX(kąt) | 2D osi X jest definiowany wzdłuż nachylenia konwersji. |
| skewY(kąt) | Zdefiniowane wzdłuż osi Y transformacji pochylać 2D. |
| perspektywy(n) | 3D elementem konwersji zdefiniować widok perspektywiczny. |
Więcej przykładów
Obracanie obrazu
Ten przykład pokazuje, jak utworzyć "polaroid" Zdjęcia i obracanie zdjęć.