CSS ile 3D Düğme Çevirme Animasyonları Nasıl Oluşturulur

Birbirlerinin üzerinde, düğmenin ön ve arka yüzleri için iki ve ortadaki derinliği doldurmak için üçüncüsü. Üç düğmeyi yüzlerin içine .flipBtn 3D düğmesi olarak işlev görecek konteyner ve 3D düğmesini .flipBtnWrapper sargı.

2. CSS ile temel stiller eklemek

Biz ayarladık Genişlik ve yükseklik sargının, düğmenin ve düğmenin özellikleri yüze gelir ve bunları göreceli / mutlak konumlandırma tekniğini kullanarak konumlandırın.

 .flipBtnWrapper genişlik: 200 piksel; yükseklik: 200px; pozisyon: göreceli;  .flipBtn, .flipBtn_face genişlik:% 100; yükseklik:% 100; pozisyon: mutlak;  

3. 3 düğmenin yüzünü biçimlendirin

Ön ve arka düğme yüzlerine arka plan görüntüleri ekler ve her ikisinin de resimlerinin arkasına serin bir doğrusal degrade koyarız. Buradaki hile, CSS'de, aynı öğe için birden çok görüntüyü arka plan görüntüsü olarak ayarlayabilmeniz ve degradeleri arka plan görüntüsü olarak bildirebilmenizdir..

Orta yüz, .flipBtn_mid, bir verilir yükseklik 20 piksel, ve aynı ve 20 piksel boşluk ön ve arka yüzleri arasında oluşturulur. İkincisini kullanarak translateZ () CSS işlevi bu öğeyi z ekseni boyunca hareket ettirir. Arka yüzü 10 piksel geriye iter ve ön yüzü 10 piksel öne çıkarırız.

 .flipBtn_front background-image: url ("görüntü / css-3d-flip-button-animation-play.png"), doğrusal degrade (# FF6366 50%, # FEA56E); arka yüz görünürlüğü: gizli; dönüşüm: translateZ (10px);  .flipBtn_back background-image: url ("görüntü / css-3d-flip-button-animation-pause.png"), doğrusal degrade (# FF6366 50%, # FEA56E); arka plan rengi: mavi; dönüşüm: translateZ (-10px);  .flipBtn_mid yükseklik: 20 piksel; arka plan rengi: # d5485a; dönüşümü: rotateX (90deg); üst: -10px; 

için alanı ört ön ve arka arasında orta olanla orta yüzü düz yatır kullanarak 3B alanın x düzlemi boyunca dönüşümü: rotateX (90deg); buna hükmet dik yapar hem ön hem de arka düğme y düzlemine bakar.

Orta yüz, x düzlemi boyunca düz olarak yerleştirildiğinden, y ekseni üzerindeki üst noktası, orijinalinden 10 piksel (yüksekliğinin yarısı) aşağı iner. Bu yüzden, geriye doğru çekin ve üst kısmını diğer iki düğme yüzü ile hizalamak için üst: -10px yanı sıra.

Kullandım backface-görünürlüğü Ön yüz için CSS özelliği, bu yüzden düğmeyi çevirdiğimizde, ön yüzün arkası görünmez.

Şimdiye kadar, x-düzlemi görünüşte gizlendiği için ön yüzü yalnızca ekranda göreceksiniz ve y düzleminde (ekran) ortaya konan son yüz ön taraf oldu.. Düğmeyi döndürerek diğer yüzleri de görebileceksiniz.

4. Düğmeyi döndürme

Dönüştürme stili CSS özelliği, bir HTML öğesinin alt öğelerinin düz olarak mı yoksa 3B alanda mı konumlandırılacağını belirler. Aşağıdaki kod parçasında dönüşüm tarzı: koru-3d; kural, düğmemize 3D ses verirken dönüşümü: rotatexX () özellik onu x ekseni etrafında döndürür.

 .flipBtn dönüşüm tarzı: koru-3d; dönüşümü: rotateX (-120deg);  

Kullandığımı unutmayın -120deg yalnızca gösterim amacıyla, bu şekilde düğme döndürmenin nasıl çalıştığını göstermek daha kolaydır..

Ancak bir sonraki adımda değiştireceğiz -180deg düğmeyi tamamen çevirmek için.

5. Düğmeyi hareketlendirme

Bu noktada, 3B düğmemiz hala hareketli değil. Bunu kullanarak yapabiliriz. geçiş özelliği. Kullanıyoruz dönüştürmek İlk değer için özellik, çünkü bu geçiş efektini uygulamak istediğimiz özelliktir. İkinci değer, süre, 2s.

Düğmenin yalnızca vurgulu olarak dönmesini sağlayalım. .flipBtn seçici kullanalım .flipBtnWrapper: vurgulu .flipBtn. Daha önce de belirtildiği gibi, aynı zamanda değerini rotateX () için -180deg düğmenin etrafında dönmesi için.

 .flipBtn geçiş: 2s dönüşümü; dönüşüm tarzı: koru-3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg); 

Github deposunda, ben her düğmeye bir onay kutusu eklendi animasyonu başlatmak için :kontrol yerine : hover, bu şekilde gerçek bir düğme gibi davranır. Ayrıca dört çevirme yönüne sahip dört farklı düğme (Üst → Alt, Alt → Üst, Sağ → Sol ve Sol → Sağ) ekledim, böylece hangisini istediğinizi kolayca kullanabilirsiniz.

• Demoyu Gör
• Kaynak İndir