Skip to content

Instantly share code, notes, and snippets.

@jeedy

jeedy/회전목마.html

Last active December 16, 2015 19:39
Show Gist options
  • Save jeedy/5487109 to your computer and use it in GitHub Desktop.
Save jeedy/5487109 to your computer and use it in GitHub Desktop.
Download ZIP
css로 구현된 회전 목마 ui
Raw
회전목마.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform basic</title>
<style>
* {margin:0; padding: 0;}
html, body {height: 100%}
body {
width: 600px;
margin: 0 auto;
}
header {
position: absolute;
left:0; top:0; right:0;
height: 50px;
background: black;
}
#canvas {
position: relative;
width: 100%; height: 200px;
perspective:1500;
}
.face{
position: absolute;
left: 0; top: 0;
margin-left: -115px;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.cell{
width: 230px; height: 150px;
margin-bottom: 5px;
background: url("http://placehold.it/260x200");
background-size: 100% 100%;
transition-duration: 0.5s;
}
.face:nth-child(1) { transform: rotateY(0deg) translateZ(-370px); }
.face:nth-child(2) { transform: rotateY(36deg) translateZ(-370px); }
.face:nth-child(3) { transform: rotateY(72deg) translateZ(-370px); }
.face:nth-child(4) { transform: rotateY(108deg) translateZ(-370px); }
.face:nth-child(5) { transform: rotateY(144deg) translateZ(-370px); }
.face:nth-child(6) { transform: rotateY(180deg) translateZ(-370px); }
.face:nth-child(7) { transform: rotateY(216deg) translateZ(-370px); }
.face:nth-child(8) { transform: rotateY(252deg) translateZ(-370px); }
.face:nth-child(9) { transform: rotateY(288deg) translateZ(-370px); }
.face:nth-child(10) { transform: rotateY(324deg) translateZ(-370px); }
.cell:hover{
transform: scale(1.2) translateZ(50px);
}
#merry {
position: absolute;
left: 50%; top: 30px;
transform-style: preserve-3d;
animation: rint 20s linear 1s infinite ;
}
#merry:hover{
animation-play-state: paused;
}
@keyframes rint
{
from { transform: rotateX(0deg) rotateY(0deg); }
25% { transform: rotateX(-20deg) rotateY(90deg); }
50% { transform: rotateX(0deg) rotateY(180deg); }
75% { transform: rotateX(-20deg) rotateY(270deg); }
to { transform: rotateX(0deg) rotateY(360deg); }
}
</style>
<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" ></script>
</head>
<body>
<div id="canvas">
<div id="merry">
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="face">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
<header>회전 목마 UI</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment