CSS 3D Dönüşümleri ve Perspektif Hakkında Öğrenme

Faydalı Alternatif Metin Yazma

3D dönüşümler, bir süredir CSS’de mevcut olmasına rağmen, hiç iyi anlamadığım bir alandır. Sanırım şimdi CSS’de yeni olsaydılar, Hareket Yolu ve diğer bazı yeni CSS özelliklerinde olduğu gibi onlarla daha çok vakit geçirirdim. Mevcut durumda, onları üretimde kullanmak için hiçbir zaman fazla nedenim olmadı (garip istisna dışında), bu yüzden zamanımı ve enerjimi başka şeylere yoğunlaştırdım.

Ancak yetenekli kişilerin Codepen’deki son çalışmaları, CSS’nin bu güçlü alanını daha iyi kavramamı dilememe neden oldu. Aşık oldum Adam Kuhn’un bu demosu3B dönüşümleri Hareket Yolu ile birleştiren – Bunları birlikte kullanmak için çok daha fazla potansiyel görebiliyorum. Ana Tudor inşa Johnson Solids’in tüm serisi, giderek daha karmaşık hale geliyor. Çokyüzlüleri kodlayan etkileyici bir çalışma grubuna sahip. bu koleksiyon. Bu oldukça basit akıllara durgunluk veren demodan bahsetmiyorum bile Amit Sheenbir kitabın sayfalarının aslında 3B dönüşümlerle canlandırıldığı yer:

Kalemi Gör CSS ile sayfaları çevirmek tarafından Amit Sheen (@amit_sheen) üzerinde kod kalemi.

Öğrenmenin zamanının geldiğini düşündüm! buna rastladım iyi yazılmış makale, ayrıca Amit Sheen tarafından, 3B dönüşümleri ve perspektifi açıklıyor. Hareketli bir küp oluşturma adım adım adım adım ilerlemeyle birleştirilen etkileşimli örnekler, işlerin tıklanmasına gerçekten yardımcı oldu. Gelecekte 3B dönüşümlerle çok daha fazlasını inşa etmeyi ve bu konuda kendime çok daha fazla güvenmeyi dört gözle bekliyorum!

Yeni edindiğim bilgileri denemek için internette gördüğüm bir GIF’den esinlenerek küçük bir CSS animasyonu yaptım. Tek kullanır <div>birden çok yinelenen arka plan gradyanları, 3B dönüşümler ve animasyonlu background-position. (Degradeleri yalnızca CSS ile canlandıramazsınız, ancak Yapabilmek canlandırmak background-position).

Kalemi Gör Tek bölmeli gradyan ızgarası Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Ayrıca, birkaç öğenin dönüşümünün, transform-style ve perspective-origin ebeveynin özellikleri – kafamı toparlamam biraz zaman alan bir şey:

Kalemi Gör Dönüştürme tarzı Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi. Kalemi Gör Perspektif-kökenli Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Hâlâ öğrenecek çok şeyim olduğunu hissediyorum ama tek yol pratik yapmak!

Esin

Yetenekli kişilerden bazı ilham verici demolar:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.