CSS3 2D Dönüşümlerine Bir Bakış
Dönüşüm modülü CSS3'teki muazzam bir eklentidir, bir web sitesindeki elemanları bir sonraki seviyeye yönlendiririz.
Beni gerçekten şaşırtan bazı deneyler var, bunun gibi örnekler. Bununla birlikte, gerçek hayatta da oldukça kullanışsız olabileceği için, bir şekilde bir Autobot'a dönüşebilecek bir CSS-sadece simgesi gibi bir şey inşa etmeyeceğiz..
Bunun yerine, bu sefer, geri adım atıp, temel düzeyde nasıl çalıştığını görmek için CSS3 2D Dönüşümlerinin temellerini gözden geçireceğiz..
Sözdizimi
CSS3 Transformations modülü temel olarak bir elemanı çevirme, ölçeklendirme, döndürme ve eğriltme gibi bir dereceye kadar dönüştürmemize izin verir..
Resmi sözdizimi transform: yöntemi (değer). Ancak, halen erken aşamada olan diğer tüm CSS3 eklentileri gibi, mevcut tarayıcılar da dönüşümleri çalıştırmak için sözdizimi sürümüne ihtiyaç duyuyor. Böylece, söz diziminin tamamı şu şekilde olacaktır:
dönüşümü: yöntem (değer); / * W3C Resmi Sözdizimi * / -o-transform: yöntem (değer); / * Opera 10.5+ * / -ms-transform: yöntem (değer); / * Internet Explorer 9.0+ * / -moz-dönüşümü: yöntem (değer); / * Firefox 3.6+ * / -webkit-transform: yöntem (değer); / * Chrome / Safari 3.2+ * /
Ayrıca, yukarıda bahsettiğimiz yöntem -İşlevleri dönüşümü, bunlar aşağıdakilerden biriyle değiştirilebilir: Çevirmek(), ölçek (), ) (Döndürme veya eğri ().
Değer
Yöntemin değerinin çoğu, X koordinatı ve Y-ekseni. Kartezyen koordinat sistemini Lise'deki Math sınıfınızdan hatırlıyorsanız, temel prensip oldukça benzerdir, X ekseni yatay çizgi ve Y ekseni dikey hat.
Rotasyonlar hariç. rotasyon kullanacak kutupsal koordinatlar 0 ile 360 arasında değişen derecelerde ifade edilir..
Tüm metotların değerleri hem negatif hem de pozitif olabilir. Web sayfasını yukarıdan aşağıya doğru okuduğunuz için web'deki Y eksenini Kartezyen koordinatlarının orijinal prensibinin tersi yönde çalıştıran bir not alın. Bu, negatif bir değer eklediğinizde Y-ekseni, yerine üste hareket edecek.
Dönüşümleri Kullanma
Şimdi, Dönüşümü eylem halinde görmek için aşağıdaki temel gösteriyi görelim:.
Ben çeviririm
Terim ile bulutlu olmayın Çevirmek, yabancı dili çevirmeyecek. Çevirmek Burada aslında elemanları bir yönde hareket ettirmek için bir yöntem.
Bu yöntem iki değer içerir; X ve Y. X değeri yukarıda belirttiğimiz gibi, elemanı yatay olarak alacak; sola veya sağa, iken Y değer dikey olarak alır alt veya üst.
Şimdi, aşağıdaki basit gösterileri görelim:
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: tercüme (100px, 250px);
Yukarıdaki snippet öğesi, 100px için sağa ve 250px'in altına taşıyacak.
div genişlik: 100 piksel; yükseklik: 100px; dönüşüm: tercüme (100px, 0);
Yukarıdaki kod parçası, 100px için öğeyi tam sağa hareket ettirir, çünkü Y eksenini sıfırlıyoruz. Öyleyse, elemanı sola hareket ettirmek istiyorsak, sadece X eksenini negatif olarak ayarlamamız gerekir:
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: çevir (-100px, 0);
- "Çevir" demosu
Alternatif olarak, bu bireysel yöntemlerle elementi tek bir yönde hareket ettirebiliriz; translateX () ve translateY (), fark, bu yöntemlerin her birinin yalnızca bir değeri kabul etmesidir.
Yani, pratik olarak, dönüşümü: çevir (-100px, 0) ayrıca eşittir dönüşümü: translateX (-100px).
II - Ölçek
ölçek yöntem bize sağlar büyüt veya küçült gerçek boyutundan elemanlar. Ölçeğin değeri, aynı Çevirmek Yukarıdaki yöntemde ayrıca X ve Y de bulunur. Tek fark, birimi belirtmememizdir. İşte bir örnek:
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: ölçek (1.5);
Yukarıdaki örnekte, div 1.5 veya % 150 gerçek boyutunda, ve hem X hem de Y yönleri için eşit olarak ölçeklendirdiğimiz için, yalnızca bir değerde bildirmemiz gerekir. Ayrıca bu şekilde beyan edebilirsiniz. dönüşüm: ölçek (1.5, 1.5); daha fazla ayrıntı almak istersen, aynısını yapacak.
Ayrıca, elementi azaltmak istiyorsak, aşağıdaki gibi, özellikle div boyutunu% 50 veya yarıya indirecek olan 0.999 ile mutlak 0 arasındaki bir değeri kullanırız:
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: ölçek (0.5);
Ancak, değeri mutlak olarak ayarlarsanız, dikkatli olun “0” div Sadece kaybolacağım, yani geçerli bir nedeniniz olmadıkça, bunu yapmayı tavsiye etmem..
- "Ölçek" demosu
III - Döndür
Bu yayında daha önce belirttiğimiz gibi, döndürmek yöntem kutupsal koordinatları kullanır, bu nedenle değer derece cinsinden ifade edilir. İşte iki örnek
Aşağıdaki kod parçacığı div Saat yönünde 30 derece.
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: döndür (30 derece);
Aşağıdaki örnekte gösterildiği gibi, negatif bir değer div ters yönde (saatin tersi yönünde) aynı derecede.
div genişlik: 100 piksel; yükseklik: 100px; dönüşümü: döndürme (-30deg);
- "Döndür" demosu
IV - Eğri
eğri yöntem bir çeşit paralelkenar yaratmamızı sağlar. Ayrıca, X ve Y ekseninin iki değerini içerir. Bununla birlikte, değerin kendisi gibi kullandığımız doğrusal ölçümler yerine derece cinsinden belirtilir. ölçek ya da Çevirmek yöntem. İşte bir örnek:
div genişlik: 200 piksel; yükseklik: 100px; dönüşümü: çarpık (30deg, 10deg);
- "Skew" demosu
V - Çoklu yöntem
dönüştürmek özellik yalnızca bir yöntemi işlemekle sınırlı değildir, aslında tek bildirimlerde birden çok yöntemi ekleyebiliriz, bunun gibi:
div genişlik: 100 piksel; yükseklik: 100px; dönüşüm: translateX (100px) döndürür (45deg);
Yukarıdaki kod parçası, 100px öğesini sağa doğru hareket ettirir ve aynı zamanda 45 derece de döner.
"Çoklu Yöntem" demosu.
Kökeni Dönüştür
Transfrom kökenli - adından da anlaşılacağı gibi - dönüşümün başlangıç noktasını kontrol etmek için kullanılır. Bu özelliği açıkça aşağıdaki sözdizimiyle beyan etmezsek dönüşüm orijini: X Y;, daha sonra tarayıcı, X için% 50 ve Y için% 50 olan varsayılan değeri alır..
Şimdi, eğer belirtirsek dönüşümü menşeli 0 (X) 0 (Y) 'ye dönüşüm sol üstte başlayacak.
Yine, tüm tarayıcılar bu özelliği çağırmak için hala önek sürümüne ihtiyaç duyarlar. Dolayısıyla, çoğu tarayıcıda çalışabilmesini sağlayan tam sürüm:
-webkit-dönüşümü-kökeni: X Y; -moz-dönüşüm-kökeni: XY; -o-dönüşümü-kökeni: XY; -ms-dönüşümü-kökeni: XY; dönüşüm orijini: X Y;
- "Dönüşüm kökenli" demosu
Sonuç
Dört temel dönüşüm yönteminin hepsinden geçtik; çevir, ölçekle, döndür ve eğrilt
Ancak, belirtildiği gibi, bu modül hala erken aşamadadır, bu nedenle bu yöntemleri bir sonraki web sitenize uygulayacaksanız, uyumsuz tarayıcılar için incelikle bozunduğundan emin olun (burada IE6'ya atıfta bulunmuyorum)..
Son olarak, tüm demosu görüntüleyebilir veya kaynağı aşağıdaki bağlantılardan indirebilirsiniz..
- gösteri
- Kaynak İndir
