Kayıtlar

transform-origin etiketine sahip yayınlar gösteriliyor

CSS transform-origin Özelliği

CSS transform-origin Css transform-origin özeliği ile dönüştürülecek html elemanın orijin noktaları düzenlenebilir. Örnek: Bu örnete kutu 60 derece döndürülmüştür. #kutu1 { position: relative; height: 180px; width: 180px; } #kutu2 { position: absolute; -ms-transform: rotate(60deg); /* IE 9 */ -ms-transform-origin: 30% 50%; /* IE 9 */ -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 30% 50%; /* Chrome, Safari, Opera */ transform: rotate(45deg); transform-origin: 30% 50%; } Kendiniz deneyin » CSS transform-origin nedir nasıl kullanılır 2D dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümler de bir elemanın z - eksenini değiştirebilirsiniz. CSS transform-origin CSS transform-origin özellikleri &nbsp Varsayılan Değer: 50% 50% 0   Kalıtsallık: yok   An

JavaScript CSS transform-origin Örnek

javascript css3 transform-origin özelliği örnek uygulama ANA Kutu kutu1öncesi kutu1sonrasi Javascript ile transform-origin özelliğine "0 0" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.transformOrigin = "0 0"; document.getElementById("kutu1sonrasi").style.msTransformOrigin = "0 0"; document.getElementById("kutu1sonrasi").style.WebkitTransformOrigin = "0 0"; } Çalıştır JavaScript css transform-origin © htmlvecssegitimi.blogspot.com

CSS3 transform-origin Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>css transform-origin özelliği ve örnek uygulama</title> <style> #kutu1 { position: relative; height: 180px; width: 180px; margin: 90px; padding: 25px; border: 1px solid black; } #kutu2 { padding: 80px; position: absolute; border: 1px solid black; background-color: pink; -ms-transform: rotate(60deg); /* IE 9 */ -ms-transform-origin: 30% 50%; /* IE 9 */ -webkit-transform: ro