Merhaba arkadaşlar, bildiğiniz gibi google flash ile yapılan sitelerde seo yapamaması nedeniyle, flash ile yapılan siterler artık tarih oldu. Bu sebepten flash’ın bırakmış olduğu açığı bir çok kodlama dili üstlenmeye başladı ve css de bunlardan biri. Gün geçtikçe css ile animasyonlar yapar hale geldik. Bu uygulamada ise css 3d persvective, transition-style, transfrom, transform-style gibi 3d css kodları ile bir küp yaptım. Bu uygulamada javascript kodlarıda kullanmak zorunda kaldım. Sayfadaki range butonları ile küpü istediğini açıya alabiliyorsunuz. Css 3d ile ilgili bütün kodları ve açıklamalarıyla birlite bir sonraki yazım detaylı olarak ele alacağım. Bu uygulama ile sitenizde persvective bir açı koyabilir ve kullanıcıları etkileye bilirsiniz. Küpün her bir yüzünü buton haline getirebilir yeni bir menü türü üretebilirsiniz. Her bir div’in içerisine bir video ekleyebilir yeni bir tarz getirebilirsiniz. Bunun gibi bir çok uygulama yapabilirsiniz temel olarak ben hazırladım. Sizlere de faydalı olması dileğiyle, başarılar.
|
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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>3D ANIMATIN (Anismasyon)</title> <meta name="keywords" content="css perspective kullanımı, css preserve-3d, css transform, transform-style, css 3d, css 3d animatin, Php Developer,php,php mysqli,css, css developer,web tasarım,çağlar bostancı,web master, web tasrım" /> <meta name="discription" content="css perspective kullanımı, css preserve-3d, css transform, transform-style, css 3d, css 3d animatin" /> <style> body{ background-image: linear-gradient(45deg, lightblue,white,rgb(14, 185, 201)); } .babaDiv{ width:200px; margin: 50px auto; border:10px solid mediumpurple; padding:150px; text-align: center; transform-style: preserve-3d; transition:all 1s ease; transform: perspective(500px) rotateX(0deg) rotateY(odeg) ; border-radius: 50%; } .anaDiv{ position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition:all 1s ease; transform: perspective(500px) ; } .anaDiv .cocuk{ position:absolute; width: 200px; height: 200px; font-size:4vw; line-height: 200px; color:white; box-sizing: border-box; text-align: center; } .anaDiv .cocuk:nth-child(1){ background: rgba(209, 188, 252,0.7); transform: perspective(500px) translateZ(100px); } .anaDiv .cocuk:nth-child(2){ background: rgba(212, 10, 3,.7); transform: rotateY(180deg) perspective(500px) translateZ(100px); } .anaDiv .cocuk:nth-child(3){ background: rgba(48, 3, 212, .7) ; transform: rotateY(90deg) perspective(500px) translateZ(100px); } .anaDiv .cocuk:nth-child(4){ background: rgba(20, 212, 3, .7) ; transform: rotateY(-90deg) perspective(500px) translateZ(100px); } .anaDiv .cocuk:nth-child(5){ background: rgba(23, 180, 207, .7) ; transform: rotateX(90deg) perspective(500px) translateZ(100px); } .anaDiv .cocuk:nth-child(6){ background: rgba(23, 180, 207, .7) ; transform: rotateX(-90deg) perspective(500px) translateZ(100px); } table{ position: relative;} table tr{ line-height: 2vh; height: 2vw; font-size:2vw; vertical-align: middle; } table tr td:nth-child(1){ padding-right:1vw;} table tr td:nth-child(2){ border-left:1px solid black; padding-left:1vw; } </style> </head> <body> <table> <tr> <td>Küp Y Konum</td> <td> -360<input id="dikey" type="range" min="-360" max="360">360 <span class="kupY"></span></td> </tr> <tr> <td>Küp X Konum</td> <td>-360<input id="yatay" type="range" min="-360" max="360">360 <span class="kupX"></span></td> </tr> <tr> <td>Platform X Konum</td> <td> -360<input id="platformYatay" type="range" min="-360" max="360">360 <span class="platformX"></span></td> </tr> <tr> <td>Platform Y Konum</td> <td>-360<input id="platformDikey" type="range" min="-360" max="360">360 <span class="platformY"></span></td> </tr> </table> <div class="babaDiv"> <div class="anaDiv"> <div class="cocuk">ÖN</div> <div class="cocuk">ARKA</div> <div class="cocuk">SOL</div> <div class="cocuk">SAG</div> <div class="cocuk">YUKARI</div> <div class="cocuk">AŞAĞI</div> </div> </div> <script> var inputRange=document.querySelectorAll("input[type='range']"); inputRange[0].onchange=function(){konum();} inputRange[1].onchange=function(){konum();} inputRange[2].onchange=function(){konum();} inputRange[3].onchange=function(){konum();} function konum(){ anaDiv=document.querySelectorAll(".anaDiv")[0]; babaDiv=document.querySelectorAll(".babaDiv")[0]; x=document.querySelectorAll("input#yatay")[0].value; document.querySelectorAll(".kupX")[0].innerText=x; y=document.querySelectorAll("input#dikey")[0].value; document.querySelectorAll(".kupY")[0].innerText=y; px=document.querySelectorAll("input#platformDikey")[0].value; document.querySelectorAll(".platformX")[0].innerText=px; py=document.querySelectorAll("input#platformYatay")[0].value; document.querySelectorAll(".platformY")[0].innerText=py; anaDiv.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)"; babaDiv.style.transform="rotateX("+px+"deg) rotateY("+py+"deg)"; } </script> </body> </html> |