Örnek
Bir div öğesi döndürme:
document.getElementById("myDIV").style.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.
Tarayıcı Desteği
dönüşümü özellik Internet Explorer 10 ve Firefox'ta desteklenir.
Internet Explorer 9, alternatif destekler msTransform özelliği (2D transforms only) .
Opera, Chrome ve Safari bir alternatif, WebkitTransform özelliği (3D ve 2D dönüşümleri) destekler.
Sözdizimi
dönüşümü özelliğini Dönüş:
object .style.transform dönüşümü özelliğini ayarlayın:
object .style.transform="none| Mülkiyet Değerler değer Açıklama none Hiçbir dönüşüm olmaması gerektiğini tanımlar matrix( n,n,n,n,n,n ) Altı değerleri matrisi kullanılarak, bir 2 boyutlu dönüşüm tanımlar 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 translate3d( x,y,z ) 3D çevirisini tanımlar translateX( x ) X-ekseni için sadece değeri kullanılarak, bir çeviri tanımlar translateY( y ) Y ekseni için sadece değeri kullanılarak, bir çeviri tanımlar 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 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 scaleY( y ) Y ekseni için bir değer verilerek bir ölçek dönüşüm tanımlar 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 rotate3d( x,y,z,angle ) 3D döndürme tanımlar rotateX( angle ) X ekseni boyunca bir 3D dönüş tanımlar rotateY( angle ) Y ekseni boyunca bir 3D dönüş tanımlar rotateZ( angle ) Z ekseni boyunca bir 3D dönüş tanımlar skew( x-angle,y-angle ) X ve Y ekseni boyunca bir 2D eğri dönüşüm tanımlar skewX( angle ) X ekseni boyunca bir 2D eğri dönüşüm tanımlar skewY( angle ) Y ekseni boyunca bir 2D eğri dönüşüm tanımlar 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
Teknik detaylar
Varsayılan değer: Yok Geri dönüş değeri: Bir elemanın dönüşümü özelliği temsil eden bir String, CSS Sürüm CSS3
İlgili Sayfalar
CSS referansı: transform property
<Stil Nesne