[ plus_minus @ 20.05.2016. 21:11 ] @
Stranice kocke su 250*250px. To se naravno može/treba promeniti. Jedan najobičniji ul > li set, malo CSS3 pravila i `gram` javaskripte. Idealno, recimo, za prezentaciju vaših mobilnih (sajtova/aplikacija) radova, jel' da? Promeniti dimenzije iz 250 u 400*400px recimo, jer, to mu dođe kao idealno za pakovanje jednog mobile ready (čega god), pa ko ih ima 6 ili više od 6,... vaši budući klijenti možda mogu biti i dodatno očarani. Pretpostavljam da vam je jasno na šta mislim. Logično, kocka ne mora da bude ul > li, to može da bude i div > iframe .. Što se tiče kocke, obratiti pažnju na li.face i padding-top/height za taj deo, to je zbog teksta. Dakle, prekopirati sve iz html code taga, pa ondak lepo u novi .html (utf-8) fajl i otvoriti u pretraživaču. Nije potreban nikakav server. Prefixe dodati po želji -moz, -webkit, -ms ... nema ih nigde. Code (html): <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>CSS/JS cube</title> <style> #camera { perspective: 2000px; } #camera * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } ul#cube { font-family: sans-serif; font-size: 12px; list-style-type: none; position: static; display: block; margin: 8% 92% 1% 8%; padding: 0; height: 250px; width: 250px; transition: transform 3s ease; transform-style: preserve-3d; } li.face { position: absolute; text-align: center; padding-top: 25px; line-height: 1.5; width: 250px; height: 225px; border: 1px solid Black; background-color: rgba(255, 255, 255, 0.8); } #cube .one { transform: rotateX(90deg) translateZ(125px); } #cube .two { transform: translateZ(125px); } #cube .three { transform: rotateY(90deg) translateZ(125px); } #cube .four { transform: rotateY(180deg) translateZ(125px); } #cube .five { transform: rotateY(-90deg) translateZ(125px); } #cube .six { transform: rotateX(-90deg) translateZ(125px) rotate(180deg); } </style> </head> <body> <div id="camera"> <ul id="cube"> <li class="face one"> Press key UP to rotate UP</li> <li class="face two"> Press key DOWN to rotate DOWN</li> <li class="face three"> Press key LEfT to rotate LEFT</li> <li class="face four"> Press key RIGHT to rotate RIGHT</li> <li class="face five"> Single key press will rotate <br> cube for 15 degrees</li> <li class="face six"> The power of pure Vanilla JS and CSS level3. </li> </ul> </div> <script> var x = 0, y = 0, cube = document.getElementById('cube'); document.addEventListener('keydown', function(e) { e.preventDefault(); switch (e.keyCode) { case 37: y -= 15; break; // left case 38: x += 15; break; // up case 39: y += 15; break; // right case 40: x -= 15; break; // down } cube.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"; }, false); </script> </body> </html> [Ovu poruku je menjao plus_minus dana 20.05.2016. u 22:22 GMT+1] |