Skip to content

Instantly share code, notes, and snippets.

@cedricici

cedricici/dabblet.css

Created January 2, 2012 16:16
Show Gist options
  • Save cedricici/1551256 to your computer and use it in GitHub Desktop.
Save cedricici/1551256 to your computer and use it in GitHub Desktop.
Download ZIP
3d Cube
Raw
dabblet.css
/**
* 3d Cube
*/
html{
}
#cube{
width:300px;
height:300px;
background:#aaa;
perspective:300px;
perspective-origine:50% 50%;
}
#cube .zone{
width:33%;height:33%;
position:absolute;
border:1px solid #000;
}
#cube .z1{transform:translate3d(50px,50px,100px);}
#cube .z2{transform:translate3d(150px,50px,100px);}
#cube .z3{transform:translate3d(50px,150px,100px);}
#cube .z4{transform:translate3d(150px,150px,100px);}
ul{list-style-type:none;margin:0;padding:0;
position:relative;
left:100px;top:100px;
border:1px solid #aaa;
width:100px;
height:100px;
/*perspective-orgine:50% 50%;*/
/*transform:rotate3d(0,0,0,0);*/
transform-style:preserve-3d;
}
@keyframes spin1 {
0% { transform: rotate3d(-1,1,0,0deg); }
50% {transform: rotate3d(-1,1,0,-180deg); }
100% { transform: rotate3d(-1,1,0,-360deg); }
}
@keyframes spin2 {
0% { transform: rotate3d(-1,-1,0,0deg); }
50% { transform: rotate3d(-1,-1,0,-180deg); }
100% { transform: rotate3d(-1,-1,0,-360deg); }
}
@keyframes spin3 {
0% {transform: rotate3d(1,1,0,0deg); }
50% { transform: rotate3d(1,1,0,-180deg); }
100% { transform: rotate3d(1,1,0,-360deg); }
}
@keyframes spin4 {
0% { transform: rotate3d(1,-1,0,0deg); }
50% { transform: rotate3d(1,-1,0,-180deg); }
100% { transform: rotate3d(1,-1,0,-360deg); }
}
.z1:hover ~ ul{
animation: spin1 2s infinite linear;
}
.z2:hover ~ ul{
animation: spin2 2s infinite linear;
}
.z3:hover ~ ul{
animation: spin3 2s infinite linear;
}
.z4:hover ~ ul{
animation: spin4 2s infinite linear;
}
ul li{margin:0;padding:0;
position:absolute;top:0;left:0;
width:100px;height:100px;
display:table-cell;
text-align:center;
vertical-align:middle;
font-size:5em;
opacity:.9;
}
ul li:nth-child(1){
background-color:red;
transform:translateZ(50px);
}
ul li:nth-child(2){
background-color:green;
transform:translateX(-50px) rotateY(90deg);
}
ul li:nth-child(3){
background-color:yellow;
transform:translateY(-50px) rotateX(90deg);
}
ul li:nth-child(4){
background-color:gray;
transform:translateX(50px) rotateY(-90deg);
}
ul li:nth-child(5){
background-color:blue;
transform:translateY(50px) rotateX(-90deg);
}
ul li:nth-child(6){
background-color:orange;
transform:translateZ(-50px);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="cube">
<div class="zone z1" ></div>
<div class="zone z2" ></div>
<div class="zone z3" ></div>
<div class="zone z4" ></div>
<ul>
<li class="1" >1</li>
<li class="2" >2</li>
<li class="3" >3</li>
<li class="4" >4</li>
<li class="5" >5</li>
<li class="6" >6</li>
</ul>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment