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>
<!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