LARAVEL
SASS
Merhaba arkadaşlar. Bu gün yine css Animation için örnek bir uygulama ile karşınızdayım. Saat 02:31 gibi bitti. Tasarım ve kodlama bana aittir. 3D Animation bana eğlenceli geldi. Yine esinlendiğim tasarımları sizlerle paylaşacağım. Tabi bunlar kendi projelerimde de uygulamak için bir ön hazırlık olarak yapılıyor. Css 3D animasyonlar kullanıcıyı iyi etkilemektedir. Kullanıcılar genel olarak görmekdikleri tasarımları beğenmektedir. Tabi kainatta her zaman farklı olanın dikkat çektiği gibi. Gerçekleştirmiş olduğunu web tasarımlarda kullanıcıları ve müşteriyi etkilemek için kullanacağınız ufakbir animasyon örneği. Bu animasyonda persvective,transform-style,rotateX, rotateY ve transform origin genel olarak kullanılımıştır. Css 3d animasyonlarla ilgli bir çok bilgiyi sizler için hazırlıyorum. En kısa zamanda yayınlayacağım. Tabi bütün özelliklere farklı uygulama yaptığımdan biraz gecikiyor. Faydalı olması dileğiyle BAŞARILAR.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS 3D ANIMATION (Animasyon)</title> <style> .anaDiv,.baba,.cocuk-1,.cocuk-2,.cocuk-3,.cocuk-4{ width:20vw; height: 30vh; } .cocuk-1,.cocuk-2,.cocuk-3,.cocuk-4{z-index: -1;} .cocuk-3 img,.cocuk-4 img{ transform: rotateX(180deg); } .baba img,.cocuk-1 img,.cocuk-2 img,.cocuk-3 img,.cocuk-4 img{ width: 100%; height: 100%; } .anaDiv{ position: absolute; top:35vh; left:40vw; width:20vw; height: 30vh; perspective: 1000px; -webkit-perspective: 1000px; transform-style: preserve-3d; } .baba{ background: lightblue; transform:rotateY(0deg); perspective: 1000px; -webkit-perspective: 1000px; transform-style: preserve-3d; } .cocuk-1,.cocuk-2,.cocuk-3,.cocuk-4{ position: absolute; right: 0; top: 0; background: darkblue; transition: all 2s ease-in-out; } .cocuk-2{ transform-origin: top right; } .cocuk-1{ transform-origin: top left; } .cocuk-3{ transform-origin: top center; } .cocuk-4{ transform-origin: bottom center; } </style> </head> <body style=" height:100vh;background-image: linear-gradient(45deg,black,silver,black); background-repeat:no-repeat"> <h1 style="text-align:center">3D ANIMATION caglarbostanci.com.tr</h1> <div class="anaDiv"> <div class="baba"> <img src="resim-5.jpg" /> <div class="cocuk-1"><img src="resim-1.jpg" /></div> <div class="cocuk-2"><img src="resim-2.jpg" /></div> <div class="cocuk-3"><img src="resim-3.jpg" /></div> <div class="cocuk-4"><img src="resim-4.jpg" /></div> </div> </div> <script> var cocuklar=document.querySelectorAll(".baba div"); var anaDiv=document.querySelectorAll(".anaDiv")[0]; anaDiv.onmouseover =function(){ cocuklar[0].style.transform="rotateY(-180deg)"; cocuklar[1].style.transform="rotateY(180deg)"; cocuklar[2].style.transform="rotateX(180deg)"; cocuklar[3].style.transform="rotateX(-180deg)"; } anaDiv.onmouseout =function(){ cocuklar[1].style.transform="rotateY(0deg)"; cocuklar[0].style.transform="rotateY(0deg)"; cocuklar[2].style.transform="rotateX(0deg)"; cocuklar[3].style.transform="rotateX(0deg)"; } </script> </body> </html> |