Gelişmiş Tarayıcıların yeni versiyonu çıktıkca CSS3 ü daha çok desteklemiş olarak geliyorlar bugunki makalemizde transform kodumuzdan bahsetmek istiyorum öncelikle transform kodu 2D olarak adlandırılıyor ve gelecek olan HTML5 ve CSS3 ile birlikte çok güzel işler çıkartılabilir isterseniz kodlarımıza geçelim ve örneklerimizle devam edelim

transform: rotate(-45deg);
transform: translate(100px, 100px);
transform: scale(1.5, 1.5);
transform: skew(20deg, -50deg);

rotate Kodumuz ile başlayalım rotate kodumuz herhangibi bir elementi sağ yada sola belirli bir derecede döndermemizi sağlıyor örnekle devam edelim kodumzu destekleyen tarayıcılar içinde yazıcaz bir div elementini dönderelim


Demo

translate Kodumuz bir konumlandırma kodudur bir elementi bir kısımdan bir kısıma konumlandırır şimdi aklınıza ilk gelen şey bunu position: absolute; ilede yapabiliyoruz diyebilirsiniz fakat makalenin başında da değim gibi ileriyi düşünülmüş bir kod olduğunu anlarız şöyleki HTML5 CSS3 2D ve CSS3 3D matrix ile birleşince orataya animasyonlar çıkartabiliriz ve konumlandırma bunun içinde önemli bir rol oynar
şimdi kodumuzu test edelim ve nasıl çalıştığına bakalım


Demo

scale scale kodumuzu bir büyütec gibi düşünübiliriz isim verdiğimiz elemeti ve içindeki nesneleride büyütür bir width (genişlik) yada height (yükseklik) vermiş olasak bile bu kodumuzda dikkat etmemiz gereken kısım verdiğimiz ölcünün ardından herhangibi bir birim vermiyorum örnek px, em, cm gibi birimler girmiyoruz örnekler devam edelim


Demo

skew kodumuz photoshop kullanan kişiler için çok yabancı gelmeyecektir skew kodumuz ile bir elementi eğip bükebiliyoruz hemen görelim


Demo

Kodlarımız bu şekilde bir ip ucu verelim bu kodları tek tek yazmak yerine tek satır olarakta yazabiliriz örnek


dikkat etmemiz gereken kodlarımız yazarken aynen background kodunda olduğu gibi parantez içerisinde yazıp bitiriyoruz ve x ekseniyley y eksenini bir virgül ile ayırıyoruz

bütün demoyu indirmek için alttaki bağlantıyı kullanabilirsiniz başka bir makalede görüşmek dileği ile CSS yi seviyoruz
transform.rar [158.17 Kb] (İndirme: 53)