23 Temmuz 2014, ÇARŞAMBA

Css Deneyler #1 - Etkisi Saygısız Kartı

O bu yapacağız yapıyor konum ne bugün kapak seviye yukarı olduğunu olurdu Bir 3d araba çevirme CSS ile etkiler yapıyor şimdi ya da eylem önündeki içeriğine sahiptir ve sırt bir kart var ve vurgulu biz bu kartı döndürmek için gidiyoruz senin sereceğim 3d uzayda arkasında neler olduğunu görmek mümkün ancak bu teknikleri kullanmak değilse şimdi bu korkutucu gelebilir ama gerçekten var bu kadar değil CSS ve gerçekten en iyi parçası olan bir sürü şey var olup serin oluyor Bu X spearmint size başka şeyler uygulayabileceğiniz bu yüzden kart çevirme çalışan Renovo önümüzdeki birkaç videolar üzerind

e izlemeye devam yapabilirsiniz karışıklık ve çevresinde değiştirebilir ve gerçekten neler olup bittiğini anlamaya bu yüzden olacak size eğer birlikte takip edebilirsiniz bir örnek göstermek için kod Penn kullanıyor ol

acağım Hoşunuza Ben sasser Sadece olacak kullanarak olacak DEĞİL am Sadece CSS ancak ben normalize kullanıyorum ve otomatik önek Eric yapmak emin benim önek var ve ben orada olan tüm ve hiçbir şey HTML

“Burada nasıl vurgulu bir 3d saygısız kart geçişi oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up...”
LevelUpTuts

ve hücre üzerinde en önde gidip başlayalım ve Yapmanız gidiyoruz ilk şey, sadece seksen kare esasen ölü hale getirilmesidir üzerinde döndürür bu yüzden önde gidelim ve biz sadece bu çağırabilirsiniz var mıydı yapmak Bir şey yapar kartı bu yüzden biz burada ve bizim CSS bir kart var bizim kart temel stilleri ses almak için gidiyor Bir 200 piksel ile sahip olacak Bir yüksekliği, diğer 300 piksel olacak ve bir altyapıya sahip olacak ve bu arka plan ren

Css Deneyler #1 - Etkisi Saygısız Kartı Resim 1 Css Deneyler #1 - Etkisi Saygısız Kartı Resim 2 Css Deneyler #1 - Etkisi Saygısız Kartı Resim 3 Css Deneyler #1 - Etkisi Saygısız Kartı Resim 4

gini biz devam edin ve sadece bu yapabilirsiniz Burada buz mavi renk ve size 5677 can Tabii herhangi bir renk istersin FC şimdi bu yapabilirsiniz beceri, bu biraz daha oda eylem Şimdi bu hi-sekiz yapalım küçük biraz burada biz de yüksekliği ile 200 piksel gidebilirsiniz sadece bu yüzden bu örnek her şeyi devralarak olduğunu tamam bu yüzden bizim kartı vardır ve ötesinde bir olacak background-color ile daha: Bir fikir çünkü onun otomatik görüntüler: Büyük blok Böyle bloğu ya da bir şey: bu yüzden bu ekran söyleme

k zorunda değilsiniz Eğer ya da belki blok düzeyinde öğe ile kullanıyorsanız bunu yapmak istediğiniz tamam şimdi en go ahead ve koyalım Bir hover o kadar nokta kartını demek kaldı kapak ve vurgulu devlet o kadar CSS kullanarak bu kartı dönüşümü izin Biz bu kartı döndürebilirsiniz dönüşümleri böylece bir trans çiftlik n / bir / iki nokta üst üste ve sonra döner sermaye ve ben belli bir miktar derece o döndürülmüş yapacağız ve konum Şimdi aslında devam edin ve bu koydu Şimdi doksan derecelik gibi bir şey biz burada bir virgül koyarsanız Şimdi ne zaman biz ancak kart gidiyor Y erişim yardım yazdı 100 cenaze arabaları doksan derece gidiyoruz burada çok Gördüğünüz gibi ben esasen bu aşkın ona sahip Bu yapıyor kaybolur çünkü Ben hiçbir animasyon döndürerek burada kendi mesafe var biri var ve iki doksan derece esasen değil onların dadı derece o demektir demektir kendinize doğru dışarı dönen bunun hiçbir boşluk angeli alır çünkü ve onun gitmiş bu yüzden go ahead ve 120 derece gibi bu bir şey yapalım Şimdi biz üzerinde gezdirin eğer onun Dönen ve bunu görebilirsiniz orta a yazdım ama o gibi ben gerçekten sadece görünüyor Köpekbalığı tamam bu kadar çeşit var elde edildi cinsel biraz margin-top at: bu istediğim sırf burada bir o biraz yer vermek tamam şimdi bu çeşit yapıyor ama biz bir isteyeyim gerçekten asla Sağ şimdi size istiyorum biz sadece sekiz eklemeniz gerekir bunu yapmak için bir geçiş vardı Geçiş ve sonra biz bu geçirebiliriz Tüm ve o var bir 0.6 saniye ve sonra biz bunu kullanamaz Yalnızca hedef istiyorsanız bu özel dönüşümleri Eğer burada dönüştürmek ama sadece durumda bu olabilir biz onu Geçiş başka bize burada toplantı ve olacak koymak şey bir anlamı vardı Şimdilik tüm Şimdi bu demek ve en bunu kontrol edelim tamam bunu doksan olmak oluyor görebilirsiniz ve daha sonra hemen hemen tüm dönerken aslında o kadar ama 180 derece var bu rotasyon bütün düşmek yetinmek tamam şimdi bu dışarı saygısız olduğunu Bu biz istedik şekilde işe almak 180 derece Biz ilk bir kaç şey daha ben olacağım eklemek zorunda gidiyoruz Biz korumak için bu kartı söylemek gerekir onun 3d yüzden bu konuda dönüşümü söyleyebiliriz bu yüzden dönüşümü diyebiliriz tire tarzı ve ardından biz bu haşhaş olmak istiyorum çünkü bize benziyor istediğiniz kullanıcı 3d onun 3d Sadece o gibi uzaya gitmeden getirdi değil gibi Şu anda niye dönen TV uzayda yok ama Biz 3d uzay yanılsaması vermek bakmak istiyorum İhtiyacımız sonraki şey hücre biz bu karta bir kap vermek gerekir ve biz bu konteyner perspektif vermek gerekiyor bu yüzden go ahead ve bu kart tire diyelim Kap ve bizim kart içeride yerinde yaşlı adam Şimdi kodun burada bizim ilk satır için olacak Kart ve Tainer ve kart kap almak için gidiyor perspektif ve biz sadece dedi ayarlamak için gidiyoruz 700 K bu yüzden şimdi en bir gezici var ne olur kontrol edelim işaret şekerleme o harika Etkisi etkileyebilir 3d o 3d uzay her şeyi var gibi görünüyor Ateşin mükemmel ve gerçekten güzel ve pürüzsüz Onlar bir şey yapıyor olsanız bile gibi bir kaç yıl önce düşündüm olabilirdi bunun gibi CSS ile çok kolay olurdu büyük gerçekten harika olduğunu başka bir şey devam edin ve üzerinde deneyebilirsiniz ile kendi deneme ve saran ölüme neden nedeniyle de çalışıyor ama büyük bir sürü olduğunu Yapabileceğiniz şeyler Bu dönüşümler ile hiçbir a / c Bu istemedi Dikey flippy güvenen aslında dikey olarak ters çevrilmiş bu yüzden bu yüzden değiştirmek kadar basit XXS çevirmek bir balta ve biz bu aşkın ona sahip şimdi sen şimdi büküm görebiliyorum yukarı ve aşağı ve yatay eksen üzerinde esasen Ben olacak onların Elbette bu bizim olsun nasıl Araba saygısız animasyon çalışma ve bir sonraki video yapacağız göstermek size nasıl konum tam önünde ve arka içeriğe sahip olabilir % uh bu arabayı flipper ve ve ortaya çıkarmak için kullanabilirsiniz Eğer bir ilginç olabilir biliyorum bu konuda şeyler var etkileyecek içerik bazı özel tip ortaya bu yüzden her zaman olduğu gibi bu vali aşk herhangi bir sorunuz var ise veya yorumlar Bir ayrılmak Aşağıdaki videoya onun yüzü olan bir bahistir ama diyelim ki biz sizden duymak seviyorum düşünüyorum yapmayalım izliyor ve bir sonraki göreceğiniz için teşekkürler.

Açıklama

Burada nasıl vurgulu bir 3d saygısız kart geçişi oluşturmak için göstereceğim. Ekstra özellikler için Pro Up Düzeyine abone olun! http://leveluptuts.com/level-up-pro Level Up Haber Bülteni Abone http://eepurl.com/AWjGz Sorularınız için yorumlar veya ziyaret sonrası: http://leveluptuts.com/forum Level Up Tuts Destek: http://leveluptuts.com/donations Geliştiriciler için inşa basit bulut barındırma, .: https://www.digitalocean.com/?refcode=67357174b09e

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

LevelUpTuts

LevelUpTuts

Ön uç web geliştiricileri için Öğreticiler. Level Up Tuts web geliştirme ve diğer medya uygulamaları ücretsiz öğreticiler sağlamanın bir yolu olarak Scott Tolinski ve Ben Schaaf tarafından başlatıldı. Biz bir medya yaratıcısı olarak büyüme bizim bilgi yararlı bulacağını umuyorum. Biz tam zamanlı (ve freelance) geliştiriciler Çünkü, Level Up Tuts sana getirmek için biz çalışıyoruz, bir yandan projesidir. Eğer öğrendiklerini hoşlanıyorsanız bu yüzden yeni dersler yapmaya devam edebilirsiniz bağış yapmak için çekinmeyin. Level Up Tuts bu hızlı anketi doldurarak geliştirmemize yardımcı olun https://docs.google.com/forms/d/1x7MTNp_umnvdkwJ5dfOVnnJtndkYdU7EDoCE9r8bYBk/viewform

YORUMLAR



9.9/10

  • 166
    Olumlu
  • 1
    Olumsuz
  • 39
    Yorum
  • 12669
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Jorrit Jongma

    Jorrit Jongm

    17 Ocak 2008
  • kindlechatmail

    kindlechatma

    25 AĞUSTOS 2010
  • Smith Micro Graphics

    Smith Micro

    15 Mayıs 2008

ANKET



Bu sayfa işinize yaradı mı?