Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

CSS 3D rotirajuća kockica

[es] :: Web dizajn i CSS :: CSS 3D rotirajuća kockica

[ Pregleda: 4632 | Odgovora: 0 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2244 Profil

icon CSS 3D rotirajuća kockica20.05.2016. u 21:11 - pre 50 meseci
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]
about:networking
 
Odgovor na temu

[es] :: Web dizajn i CSS :: CSS 3D rotirajuća kockica

[ Pregleda: 4632 | Odgovora: 0 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.