CSS3 Transform Özelliği ile 3B Tasarımlar Nasıl Oluşturulur

CSS3 dönüştürme özelliğine gelince, 2B ve 3B olmak üzere iki boyut vardır. Animasyon yaparken, bir öğeyi bir durumdan diğerine değiştirmek için dönüşümler kullanılır. Bu öğretici, 2B animasyonlarla ilgili bu kılavuzun bir uzantısı olarak hizmet vermektedir. 3B tasarım ve bu temel kavramları birleştirerek harika animasyonları nasıl oluşturabileceğiniz hakkında biraz fikir vereceğim.

3B dönüşümler oldukça ayrıntılı olabilir ve bir çok farklı parça birleştirilirse karmaşık hale gelebilir, bu nedenle temel yapı taşlarıyla başlamak faydalıdır. Bu kavramlardan bazıları tanıdık gelecektir, ancak "z", 3B'de çalışırken yeni görünecek bir şeydir. 3B dönüşümler, 2B CSS dönüşümlerini z eksenini içerecek şekilde genişleterek DOM öğelerinin 3B dönüşümlerine izin verir.

Z Ekseni nedir?

Z eksenine çok fazla referans olacaktır. Bunu, bir şeyin size olan veya sizden olan uzaklığının ölçüm mesafesi olarak düşünmek kolaydır. Pozitif bir değer ise size daha yakındır. Negatif bir değer ise, sizden daha uzaktadır.

3B Dönüşüm Örnekleri

3B dönüşümün temel özellikleri translate3d , scale3d , rotateX , rotateY , rotateZ , perspective ve matrix3d . x,y ve z için bağımsız değişkenler aldıkları için translate3d , scale3d ve matrix3d daha fazla bağımsız değişken dahil edilmiştir. Scale özelliği bir açı için bir değer alır ve perspektif de tek bir değer alır.

Çevirmek

çeviriZ()

Bu, yalnızca z ekseni değerini kullanarak bir 3B çeviriyi tanımlar. 2D çeviriden x ve y çevirisini hatırlayabilirsiniz. Fikir translateX() , translateY() ve translateZ() ile aynıdır çünkü her biri öğeyi doğru eksen boyunca belirtilen mesafe kadar hareket ettiren bir uzunluk değeri alır.

Bu örnekte translateZ(-20px) , öğeyi görüntüleyiciden 20 piksel uzağa taşır.

İşte bu örneği oluşturmak için kod parçacığı:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

çeviri3d()

translate3d() işlevi, öğenin konumunu 3B alanda taşımak için kullanılır. Bu dönüşüm, her yönde ne kadar hareket ettiğini tanımlayan koordinatlar belirtilerek oluşturulur.

İşlev transform: translate3d(20px, -15px, 70px); görüntüyü pozitif x ekseni boyunca 20 piksel, negatif y ekseni üzerinde 15 piksel ve ardından pozitif z ekseni boyunca 70 piksel hareket ettirir.

İşte bir translate3d örneği:

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Devam eden ikinci karenin bir miktar örtüşmesi olduğu oldukça açık. Beklendiği kadar dramatik görünmeyebilir, ancak perspektif özelliğinin eklenmesi (bu eğitimin ilerleyen kısımlarında) yardımcı olacaktır.

Döndür

rotate3d() işlevi, öğeyi 3B alanda eksen etrafında belirtilen açı kadar döndürür. Bu, rotate(x, y, z, angle) olarak yazılabilir.

X döndürmek()

Piksel değerleri burada çalışmaz, derece cinsinden olması gerekir. rotateX() yöntemi, bir öğeyi x ekseni etrafında belirli bir derecede döndürür. Dikdörtgenin nasıl daha kısa olduğunu görüyor musunuz? X ekseni boyunca döndürülüyor. Bu örnek, dönüşü 55 derecede göstermektedir.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

döndürmeY()

rotateY() yöntemi, bir öğeyi y ekseni etrafında döndürür. Alttaki dikdörtgenin üstteki kadar geniş olmadığına dikkat ettiniz mi? 60 derece döndürüldüğü için yukarıdaki dikdörtgen kadar geniş görünmeyecek şekilde döndürülür.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

döndürmeZ()

rotateZ() yöntemi, bir öğeyi z ekseni etrafında belirli bir derece döndürür. Bu durumda değer 120 derecedir.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

döndürme3d()

rotate3d(1, -1, 1, 45deg) işlevi, görüntüyü y ekseni boyunca 45 derecelik bir açıyla döndürür. Öğeyi ters yönde döndürmek için negatif değerler kullanabileceğinize dikkat etmek önemlidir.

Bu, tek eksen belirtimlerinden daha karmaşık olduğu için, rotate3d şu şekilde bölünebilir: rotate3d(x,y,z,angle) .

Bunu biçimlendiren kod şöyle görünür:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Temelleri Test Etme

X ekseni boyunca saat yönünde 45 derece.

 transform: rotate3d(1, 0, 0, 45deg);

Y ekseni boyunca 45 derece saat yönünde.

 transform: rotate3d(0, 1, 0, 45deg);

Z ekseni boyunca 45 derece saat yönünde.

 transform: rotate3d(0, 0, 1, 45deg);

Belirtilen değerlere bağlı olarak, bazen bir dönüşün fark edilmeyeceğini belirtmekte fayda var; örneğin, bu fark edilmeyecektir: transform: rotate3d(0, 0, 0, 50deg);

Perspektif

Bu muhtemelen en “boyutsal” dönüşümdür. Kelimenin tam anlamıyla perspektif kazanacağınız yer burasıdır. Perspektifi ayarlamadan bir öğeye 3B dönüşümler uygularsanız, ortaya çıkan efekt üç boyutlu olarak görünmez. Bu, yukarıdaki özelliklere de eklenebilecek bir şeydir.

3B alanı etkinleştirmek için bir öğenin perspektife ihtiyacı vardır. Bu, iki şekilde uygulanabilir: transform özelliği veya perspective özelliği kullanılarak.

transform özelliği şöyle görünecektir: transform: perspective(600px); ve perspektif özelliği şöyle görünecektir: perspective: 600px; .

Aşağıdaki örnekler, ikisi arasında onu değiştirecek, bu yüzden koda yakından baktığınızdan emin olun.

perspective değeri, 3B efektinin ne kadar yoğun olduğunu belirler. Büyük bir nesneye baktığınızda nasıl hissettirdiği gibi, düşük bir değeri gerçekten fark edilebilir olarak düşünün. Daha büyük bir değer olduğunda, etki daha az yoğundur.

Ufuk noktasının konumu da özelleştirilebilir. CSS perspektifiyle ilgili olduğu için bahsetmeye ve birçok deney yapmaya değer. Varsayılan olarak, bir 3B alan için ufuk noktası merkezde konumlandırılır. Ufuk noktasının konumunu değiştirmek için perspektif-orijin özelliğini kullanın. Şuna benzer bir şey olurdu: perspective-origin: 15% 55% .

Ölçek

ölçekZ()

Bu, z ekseni için bir değer vererek bir 3B ölçekli dönüşümü tanımlar. Yalnızca z ekseni boyunca ölçeklendiği için, ölçeklendirme etkisini göstermek için başka işlevlere ihtiyaç vardır. Dikdörtgenin izleyiciye nasıl baktığını ve gerçekten perspektifi nasıl gösterdiğini gördünüz mü?

Ölçeği(Z) tam olarak anlamak için, değerle oynayın ve daha büyük değerlerle perspektifin "daha keskin" olduğunu göreceksiniz.

ölçek3d(x,y,z)

scale3d() işlevi, bir öğenin boyutunu değiştirir ve scale(x, y, z) olarak yazılır. scaleZ gibi, perspective ile birlikte kullanılmadıkça perspektifin tam olarak neye benzediği belli değildir.

Bu örnek şunu kullanır:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Hızlı bir not: Vektörün üç koordinatı da eşitse, ölçeklendirme tek tiptir ve gözle görülür bir fark olmayacaktır.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrix3d()

2B matris altı değer alırken, 3B matris 16 (4×4 matris) alır! Tüm detaylar ele alınsaydı çok uzun bir yazı olurdu, bu yüzden bu kavramı daha fazla keşfetmek istiyorsanız, Codepen'de bu etkileşimli matrix3d ​​deneyini şiddetle tavsiye ederim.

İşte matrix3d ​​için temel matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Nasıl oluşturulurum
3D Dönüşümlü Animasyonlar

Artık temel bilgiler ele alındığına göre, etkileşimli animasyonlar oluşturmak bir sonraki adımdır. CSS3 dönüşümlerini ve geçişlerini kullanarak öğeler, döndürerek, ölçekleyerek veya perspektif ekleyerek bir durumdan diğerine değişir.

CSS animasyonlarında yeniyseniz, bir geçiş olmadan dönüştürülmekte olan bir öğenin aniden bir durumdan diğerine değişeceğini bilmek önemlidir. Bunu önlemek için, değişikliği kontrol edebilmeniz ve daha yumuşak bir görünüm verebilmeniz için bir geçiş eklenebilir.

Kart Çevirme Nasıl Oluşturulur

Kim kart oynamayı sevmez? Bu örnekte çift taraflı bir kart bulunmaktadır ve bir dönüşümle çevirerek her iki tarafı da görebilirsiniz. body etiketine bir göz atarsanız, efektin çoğu perspective özelliğinden gelir. 500px olarak ayarlanmıştır. 100 piksel gibi daha düşük bir değer çok "çarpık" görünür.

İşte başlangıç ​​HTML'si:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

Bunun gerçekleşmesini sağlayan şey CSS'dir:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Bu, Codepen'de bulunabilir.

Dönüşümler konusunda yeniyseniz, bu size ilginç gelebilir: transform: rotate(1turn); Bu birim, kartımız için mükemmel çünkü bir "dönüş" birimi tam olarak göründüğü gibi, yani bir tam daire.

Ayrıca özel bir döndürme yöntemi yapmak için biraz yumuşatma kullandım. Bu transition: all 1s ease-in; .

Parçacıktaki başka bir 3B özelliği transform-style: preserve-3d; . Bunu dahil ederek, öğenin ana öğede kalmak yerine üç boyutlu uzayda “sallanmasına” izin verir.

3B Efektli Metin Nasıl Oluşturulur

Bu örnek eski bir film afişinden esinlenmiştir. Harika CSS stillerini kullanabilen pek çok farklı yazı tipi var, bu nedenle benzersiz yazı efektleri kesinlikle mümkün. Bu metin, benzersiz bir dönüşüm sağlamak için rotate3d ve transform3d kullanıyor.

HTML oldukça basittir:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

İşte temel CSS:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

Daha ayrıntılı CSS ve örnek Codepen'de bulunabilir.

Umarız CSS 3D dönüşümleri tasarımlarınıza yeni bir boyut getirir. Perspektif kullanmak, öğelerin daha boyutlu görünmesini sağlamanın harika bir yoludur. Geçişlerle birleştiğinde, animasyon oluştururken birçok olasılık vardır.