Skip to content

Instantly share code, notes, and snippets.

@bennewton999
Created October 20, 2013 04:12
Show Gist options
  • Save bennewton999/7064989 to your computer and use it in GitHub Desktop.
Save bennewton999/7064989 to your computer and use it in GitHub Desktop.
A Pen by Ben Newton.
<div class="wrapper">
<div class="cube">
<b class="front"></b>
<b class="back">$299</b>
<b class="left"></b>
<b class="right"></b>
<div class="inner-wrapper">
<i class="front"></i>
<i class="back"></i>
<i class="top"></i>
<i class="bottom"></i>
<i class="left"></i>
<i class="right"></i>
</div>
</div>
</div>
<div class="wrapper">
<div class="cube">
<b class="front"></b>
<b class="back">$299</b>
<b class="left"></b>
<b class="right"></b>
<div class="inner-wrapper">
<i class="front"></i>
<i class="back"></i>
<i class="top"></i>
<i class="bottom"></i>
<i class="left"></i>
<i class="right"></i>
</div>
</div>
</div>
.wrapper{
margin-left:28px;
float:left;
height: 300px;
margin-top:50px;
position:relative;
perspective: 800;
perspective-origin: 50% 100px;
}
.inner-wrapper {
position: relative;
margin: 0 auto;
width: 200px;
transform-style: preserve-3d;
transition: all .5s linear;
transition-delay: .5s;
}
/* cube wrapper */
.cube{
position: relative;
margin: 0 auto;
width: 200px;
transform-style: preserve-3d;
transition: all .5s linear;
}
/* outer cube */
b{
position:absolute;
width:200px;
height:200px;
display:block;
background:rgba(255,255,255,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:200px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
transition: all 1s linear;
}
b.back{
transform: translateZ(-100px) rotateY(180deg);
color:rgba(255,255,255,1);
}
b.right{
transform:rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
b.left{
transform:rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
b.front{
transition: all .0s linear;
transition-delay:.25s;
transform: translateZ(100px);
background:url(http://i42.tinypic.com/2j2iw6v.jpg);
}
/* inner cube */
i{
position:absolute;
top:50px;
left:50px;
width:100px;
height:100px;
display:block;
background-color:#ec008c;
box-shadow:inset 0 0 30px rgba(0,0,0,0.3);
//background:url(http://i45.tinypic.com/muxvt1.png);
transition: all 1s linear;
}
i.front{
transform: translateZ(50px);
}
i.back{
transform: translateZ(-50px) rotateY(180deg);
}
i.bottom{
transform:rotateX(-90deg) translateY(50px);
transform-origin: left bottom;
}
i.left{
transform:rotateY(270deg) translateX(-50px);
transform-origin: center left;
}
i.right{
transform:rotateY(-270deg) translateX(50px);
transform-origin: top right;
}
i.top{
transform:rotateX(-270deg) translateY(-50px);
transform-origin: left top;
}
/* hover transformations */
.cube:hover{
//top:150px;
transform: rotateY(180deg);
z-index:-1;
}
.cube:hover .inner-wrapper {
transform: rotateY(180deg);
}
.cube:hover b.front {
opacity:.8;
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: url(#blur);
}
.cube:hover b.top{
//transform: translateZ(100px) rotateX(-210deg);
// transform-origin: top center;
}
.cube:hover i{
// top:-200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment