Örnek
Bir döndürme <div> öğesi:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Kendin dene " Tanımı ve Kullanımı
dönüşümü özelliği, bir öğeye bir 2D veya 3D dönüşümü uygular. Bu özellik, elemanları vb çarpık ölçek, taşımak, döndürmek için izin verir.
Daha iyi dönüşüm özelliği anlamak için, bir demo görmek .
| Varsayılan değer: | none |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.transform=" rotate(7deg) " Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| 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- |
Sözdizimi
transform: none| Mülkiyet Değerler değer Açıklama Oynat none Hiçbir dönüşüm olmaması gerektiğini tanımlar Oynat " matrix( n,n,n,n,n,n ) Altı değerleri matrisi kullanılarak, bir 2 boyutlu dönüşüm tanımlar Oynat " matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) 16 değerleri bir 4x4 matris kullanılarak, 3 boyutlu bir dönüşüm tanımlar translate( x,y ) 2D çevirisini tanımlar Oynat " translate3d( x,y,z ) 3D çevirisini tanımlar translateX( x ) X-ekseni için sadece değeri kullanılarak, bir çeviri tanımlar Oynat " translateY( y ) Y ekseni için sadece değeri kullanılarak, bir çeviri tanımlar Oynat " translateZ( z ) Z ekseni için sadece değeri kullanılarak, 3D çevirisini tanımlar scale( x,y ) 2D ölçek dönüşümünü tanımlar Oynat " scale3d( x,y,z ) 3D ölçek dönüşümünü tanımlar scaleX( x ) X-ekseni için bir değer vererek bir ölçek dönüşüm tanımlar Oynat " scaleY( y ) Y ekseni için bir değer verilerek bir ölçek dönüşüm tanımlar Oynat " scaleZ( z ) Z ekseni için bir değer verilerek 3B ölçekli bir dönüşüm tanımlar rotate( angle ) 2B dönme tanımlar, açı parametresinde belirtilen Oynat " rotate3d( x,y,z,angle ) 3D döndürme tanımlar rotateX( angle ) X ekseni boyunca bir 3D dönüş tanımlar Oynat " rotateY( angle ) Y ekseni boyunca bir 3D dönüş tanımlar Oynat " rotateZ( angle ) Z ekseni boyunca bir 3D dönüş tanımlar Oynat " skew( x-angle,y-angle ) X ve Y ekseni boyunca bir 2D eğri dönüşüm tanımlar Oynat " skewX( angle ) X ekseni boyunca bir 2D eğri dönüşüm tanımlar Oynat " skewY( angle ) Y ekseni boyunca bir 2D eğri dönüşüm tanımlar Oynat " perspective( n ) 3D dönüştürülmüş elemanı için bir perspektif görünümünü tanımlar initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Masaya atılmış Görüntüler
Bu örnek nasıl oluşturulacağını gösterir "polaroid" resimleri ve fotoğrafları döndürün.
İlgili Sayfalar
CSS öğretici: CSS 2D Dönüşümler
CSS öğretici: CSS 3D Dönüşümler
HTML DOM referansı: transform property