3D Profil Nasıl Hazırlanır ? (Css Html)

 -Bugün sizlere göze hitap eden, akıcı ve 3D bir tasarımı sizin de baştan sona nasıl hazırlayabileceğinizi anlatacağım 👌




-Tasarımın boyutlarını değişti rerek blog sayfanızda, E-Ticaret sitenizde veya Cv için hazırlanmış sitenizde rahatlıkla kullanabilirsiniz.



- Bu kartı bir arka yüz ve bir ön yüz olarak düşünüp dönüş efektinde ön yüzüne 180 derecelik açı vermemiz gerekir.  Bunun için " .card:hover>.front {transform: perspective(600px) rotateY(-180deg);}" özelliğini kullanarak oluşturduğumuz ön yüzün kordinat sisteminde - yönde 180 derecelik bir açı yaptırırız ve arka yüzün 0 derecelik yani yerinden hareket bile etmemesi için .card:hover>.back {transform: perspective(600px) rotateY(0deg);} " kodunu kullanarak arka kapağın 0 derecelik açı yapmasını sağlıyoruz. Sayfanın süzülerek dönmesi için "transition: transform .6s linear; " kodunu kullanıyoruz 🙌

-Arka plan renginden ve öğeleri sayfanın ortasına nasıl hizalanacağından çok kullanıcıyı etkileyen tarafların nasıl kodlanıldığını ele almak isterim.  

-Bu sayfadaki bir diğer etkileyici taraf sosyal ikonların üzerine geldiğinde arka planın direkt olarak siyah olmayıp yavaşça siyaha dönüşmesidir. Bu özellik " transition: 0.4s; " kodu yazılarak etkinleştirilir. Bunun gibi  Sitenizi dinamik kılacak veya sizi geliştirecek hazır Css tasarımlarını github sayfamdan bulabilirsiniz 😁




Yorum Yap

أحدث أقدم