İçerik
- Başlarken
- Döner tablanın tabanını oluşturmak
- Ayakları oluşturmak
- Kol ve kafa
- Renkler ve dokular
- Oluşturma ve dışa aktarma
- Logoyu bitirmek
- Logoyu canlandırın
Web'de 3B animasyon oluşturmanın birkaç yolu vardır, bunların çoğu iyi bir JavaScript ve WebGL bilgisi veya Flash gibi bir eklenti kullanımı gerektirir. CSS 3B dönüştürmeleri sayesinde, yalnızca HTML ve CSS kullanarak 3B oluşturmak mümkündür, ancak bunu yapmak kolay değildir. Ücretsiz çevrimiçi uygulamam olan Tridiv, kullanıcıların tek bir kod satırı yazmadan 3B nesneler oluşturmasına olanak tanıyan basit ve sezgisel bir WYSIWYG arayüzü sunarak süreci basitleştirir.
Bu eğiticide, yalnızca HTML ve CSS kullanarak kurgusal bir plak şirketi olan 'Tridiv Records' için bir logo oluşturup canlandıracağız. Logonun ana görseli Tridiv kullanılarak 3 boyutlu olarak oluşturulacak. Daha sonra tipografik öğeleri normal HTML ve CSS kullanarak ekleyeceğiz.
Son animasyonu ve onu oluşturan kodu burada görebilirsiniz.
Başlarken
Tridiv'i kullanarak döner tablayı 3B olarak oluşturarak başlayacağız. Tridiv.com'a gidin ve uygulamayı başlatın. Chrome, Safari veya Opera 15 (veya üzeri) kullanıyor olmanız gerekir.
Başlamadan önce, Tridiv arayüzünü anlamak önemlidir. Düzenleyicinin ana bölümü dört görünümden oluşur: Sol üstte, sahnenin eksiksiz bir görünümünü sağlayan 3B görünümdür. Diğer üç görünüm, onu üstten, yandan ve önden gösterir. Bu üç görünümü kullanarak 3B şekiller oluşturabilir, düzenleyebilir ve taşıyabilirsiniz.
Yatay araç çubuğu iki bölüme ayrılmıştır: sol bölüm, belgenize ilişkin bilgileri görüntüler; sağ kısım, şekiller oluşturmak ve düzenlemek için araçlar içerir. Hareket seçim ve Düzenle seçim düğmeleri farklı düzenleme modları arasında geçiş yapar.
Özellikler bölmesi (kenar çubuğu) yakınlaştırma ve ızgaraya yaslama gibi belge ayarlarını ve seçilen şeklin özelliklerini (boyut, konum, döndürme, renk vb.) Görüntüler. Boyutlar ve konum için kullanılan birim ems'dir; dönüş açıları derece cinsindendir.
Öğreticinin sonraki bölümlerinde herhangi bir karışıklığı önlemek için aşağıdaki kısaltmayı kullanacağız:
w = genişlik h = yükseklik d = derinlik çap = çap x deg = x ekseninde dönme y deg = y ekseninde dönme z deg = z ekseninde dönme
Döner tablanın tabanını oluşturmak
Yakınlaştırma değerini 200 olarak ayarlayarak başlayın. Şekillerin çizilmesine yardımcı olmak için, Belge Ayarları kenar çubuğunun bölümü. Snap değerini şu şekilde ayarlayın: 0.125.
Döner tablanın tabanı basit bir küboidden oluşur, bu nedenle Küboid ekle üst araç çubuğundaki düğmesi. Editördeki dört görünümün hepsinde küboidin göründüğünü görmelisiniz.
Şekli şu şekilde yeniden adlandırın: temel özellikler bölmesinin ad alanını kullanarak (altında Şekil Özellikleri). Düzenleyici tarafından oluşturulan kodda kullanılacağından şeklin adı geçerli bir CSS sınıf adı olmalıdır. Bu sınıf adlarını daha sonra logoyu canlandırırken kullanacağız, bu nedenle oluşturduğunuz her yeni şekli doğru şekilde adlandırdığınızdan emin olun.
Kuboid adlandırıldıktan sonra, üst görünümde seçildiğinden emin olun (etrafında dairesel bir alet halkası ile maviyle vurgulanmalıdır), ardından Düzenle düzenleme tutamaçlarını göstermek için halkanın üst kısmındaki düğmesine basın. Genişlik ve derinliğe ulaşana kadar küboidin kenarlarındaki kontrol tutamaçlarını sürükleyin. w = 10 ve d = 8 içinde Şekil Özellikleri.
Yan görünümün içindeki şekle tıklayın. Bu, bu görünümdeki düzenleme tutamaçlarını gösterecek ve yüksekliğini değiştirmemize izin verecektir. Ulaşana kadar yüksekliği ayarlayın. h = 2. Değerleri doğrudan özellikler bölmesine de yazabilirsiniz. Küboidin köşelerini yuvarlamak için özellikler bölmesindeki köşe değerlerini şu şekilde değiştirin: 1.75, ardından [Giriş] Değişiklikleri uygulamak için anahtar. Böyle bir şeye sahip olacaksın.
Ayakları oluşturmak
Döner tablanın ayakları için silindir kullanacağız. Bir silindir ekleyin ve çapını şu şekilde değiştirin: çap = 1.75 ve yüksekliği h = 0.5. Tıkla Hareket sürüklenebilir alanı şekil üzerinde göstermek için üst araç çubuğundaki seçim düğmesini tıklayın. Silindiri köşelerden birine yerleştirerek tabanın altına hareket ettirin. (Yukarı, yan ve ön görünümde taşımanız gerekebilir.)
Silindiri çoğaltın ( Çiftleme aletlerin dairesel halkasındaki düğmesine veya D tuşu) ve yeni silindiri tabanın başka bir köşesine hareket ettirmek için. Dört ayağın tamamı doğru şekilde konumlandırılana kadar işlemi tekrarlayın. Silindirlere ad vermeyi unutmayın (örneğin, ayak-sol-üst, ayak-sağ-üst, ayak-sol-alt, ayak-sol-üst). Bunu yaptığınızda, sonuç şöyle görünmelidir.
Şimdi tabağı, diski, kol eksenini ve düğmeyi oluşturmaya bakacağız. Sonraki şekilleri oluşturma süreci ayaklar için olana benzer. Farklı silindirler için kullanılan boyutlar şunlardır:
tabağı: çap = 7; h = 0,5 disk: çap = 6,75; h = 0,25 düğmesi: çap = 1,5; h = 0,25 kol ekseni tabanı: çap = 2,25; h = 0,25 kol ekseni: çap = 1,375; h = 1
Silindirlerin kenarlarını iyileştirmek için, özellikler bölmesindeki kenarlar alanını kullanarak her birindeki yüz sayısını artırabilirsiniz. Editörün genel performansını ve son animasyonu olumsuz etkileyebileceğinden çok fazla taraf eklemeyin. Bu durumda, tabak ve disk için 32'den fazla kenar kullanmamanızı tavsiye ederim. Böyle bir şey olmalı.
Kol ve kafa
Döner tablanın kolu ve başı için küp küpler kullanacağız. Kol için bir küboid oluşturun (w = 0.25; h = 0.25; d = 4), ardından bir döndürme uygulayın -33° üzerinde y ekseni. Kafa için bir küboid oluşturun (w = 0.5; h = 0.5; d = 1), ardından bir döndürme uygulayın -33° üzerinde y ekseni. Her iki şekli de kol ekseni silindiri ile hizalayın. Sonuç şöyle görünmeli.
Renkler ve dokular
Döner tabla ile neredeyse işimiz bitti. Son adım, renkler atamak ve vinile bir doku uygulamaktır (kaydın yüzeyini temsil eden bir görüntü). Renk atamak için bir şekil seçin ve renkler Özellikler bölmesindeki alanı. Tridiv, bir şeklin her yüzü için ayrı renkler belirlemenize izin verir, ancak bu örnekte, tüm yüzlerin rengini değiştirmek için tüm alanını kullanmamız gerekir. Bunu yapmak için alana bir onaltılık renk kodu girin ve ardından düğmesine basarak onaylayın. Giriş.
İşte bu örnekte kullanılan renkler:
taban: # 0099FF ayak, düğme, eksen, kol ve kafa: # F2EEE5 disk: # fa7f7a
Vinilin dokusu için süreç, renk atamaya benzer. Disk silindirini seçin ve ardından Görüntüler Özellikler bölmesindeki alanı. Vinile uygulamak istediğiniz görüntünün URL'sini üst alana yapıştırın ve düğmesine basarak onaylayın. Giriş. Kendinize ait bir görsel kullanabilir veya bu örnekte kullanılanı indirebilirsiniz.
Şimdi buna benzer bir şeye sahip olmalısınız.
Oluşturma ve dışa aktarma
Artık döner tabla bittiğine göre, dışa aktarmadan önce nasıl işlendiği üzerinde çalışacağız. Tıkla Ön izleme Özellikler bölmesinin üst kısmındaki düğmesine tıklayın. Yakınlaştırma değerini şu değere ayarlayın: 200 döner tablayı daha büyük görüntülemek için. Şekillerin siyah kenarlıklarını kaldırmak için şuraya gidin: Sınırlar bölmenin bölümünü seçin ve opaklığı ayarlayın 0. Sonuç şuna benzer görünmelidir.
Döner tablanın üstten aydınlatılmasını istiyoruz. Bunu yapmak için sahneyi döner tablanın üst kısmı size bakacak şekilde döndürün. Taban mükemmel dikdörtgen görünmelidir. Özellikler bölmesinin tridiv.com/d/4k6 bölümünde açık ve koyu değerlerin değiştirilmesi, sahne içindeki gölgeleri yeniden oluşturacaktır. Işık değerini şu şekilde değiştirin: 0.
Döner tabla artık ihraç edilmeye hazır!
Logoyu bitirmek
Metni logoya eklemeye ve logo animasyonunu oluşturmaya hazırız. Tıkla Düzenle sol alt tarafındaki CodePen düğmesinde Ön izleme kodu CodePen'e dışa aktarmak için görüntüleyin. Tridiv tarafından oluşturulan CSS kodunun satıcı öneklerini kullanmadığına dikkat etmek önemlidir, bu nedenle kodu her tarayıcıda işlevsel hale getirmek için prefixr.com veya leaverou.github.io/prefixfree gibi araçlar kullanmanız gerekecektir. Kullanmayacağımız için JavaScript bölmesini kapatarak başlayın. HTML bölmesinde, ekrana uygulanan stil etiketini kaldırın. .faliyet alani, sahne div.
CSS bölmesini genişletin ve sonuna aşağıdaki kodu ekleyin:
.scene {dönüşüm: translateY (-140px) rotateX (-55deg); }
Burada translateY (-140px) döner tablayı 140 piksel yukarı hareket ettirerek altındaki metin için yer bırakır. Sonra rotateX (-55deg) döner tablanın dikey eğimini ayarlar.
Metni eklemek için, bir .Başlık açılıştan hemen sonra div #tridiv HTML bölmesinde div. İçine iki ekle aralıklar> (.main-title ve .sub-title) ile ayrılmış hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> KAYITLAR / span> / div>…
Daha sonra doğru yazı tiplerini ve stilleri uygulamanız gerekir. CSS bölmesinde, logoda kullanılan Open Sans yazı tipini içe aktarın ve metin öğeleri için temel stilleri ekleyin.
@import url'si (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Metin bloğu merkezleme + temel yazı tipi stilleri * / başlık {konum: mutlak; üst:% 50; sol:% 50; kenar boşluğu: 0 0 0 -165px; genişlik: 330px; yükseklik: 5em; font-family: "Open Sans", sans-serif; yazı tipi ağırlığı: 300; yazı tipi boyutu: 24px; metin hizalama: merkez; harf aralığı: 1.5em; renk: # 0099FF; } başlık sa {sınır: 1px katı # fa7f7a; kenar boşluğu: .75em 0; } başlık aralığı {display: block; } .main-title {yazı tipi boyutu: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Logonuz tamamlandı. Aşağıdaki resim gibi görünmelidir. 3B modeliniz tamamlandıktan sonra, stil, animasyon veya fare olayları ekleyerek daha da iyi hale getirmek için CSS'nin gücünü kullanabilirsiniz: 3B modeli diğer herhangi bir HTML öğesi gibi kullanın.
Logoyu canlandırın
Logoyu kullanan bir animasyonu burada görün. Döner tablanın parçaları "düştükçe", her biri aynı ana kare animasyonunu farklı gecikmelerle paylaşır. Şekillerin üst özniteliği şu şekilde ayarlanmıştır: 50%. Düşme efekti oluşturmak için, üst niteliği -400px -e 50%:
@keyframes {0% {top: -400px; } / * Şekli 400 piksel yüksekliğe yerleştirerek animasyonu başlatıyoruz * /% 100 {top: 50%; } / * sonra orijinal konumunda sonlandırıyoruz * /}
Bu animasyonu aşağıdaki gibi tüm şekillere ekleyebilirsiniz:
.shape {üst: -400px; animasyon: sonbahar 1'ler ileri 0 saniyeyi kolaylaştırır; }
En üst özelliği şu şekilde ayarlayın: -400px ve bir gecikme ekleyin:
.platter {animasyon gecikmesi: 1.05s; } .disc {animasyon gecikmesi: 1.35s; } .button {animasyon gecikmesi: 1.5s; } ...
Son 'sıçrama' efektini oluşturun. rotateX öznitelik:
% 90 {dönüşüm: translateY (-5em) rotateX (780deg) rotateY (0deg); }% 95 {dönüşüm: translateY (-4em) rotateX (620deg) rotateY (0deg); }% 100 {transform: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Bu özel sürümü böyle yarattık, ancak unutmayın: sınır yoktur!
Kelimeler: Julian Garnier
Bu makale ilk olarak 248 net dergisinde yayınlandı.
