<div class="logo">
<div class="cube">
<span></span>
<span></span>
<span></span>
</div>
<div class="cube">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="logo wireframe">
<div class="cube">
<span></span>
<span></span>
<span></span>
</div>
<div class="cube">
<span></span>
<span></span>
<span></span>
</div>
</div>
@import "bourbon";
// logo container
.logo {
$size: 100px;
$color: #ccc;
position: relative;
height: $size * 2;
width: $size * 1.8;
// cube container
.cube {
position: absolute;
top: 50%;
left: 50%;
// inner cube
&:nth-child(2) {
@include transform(rotate(180deg) scale(.5));
}
// cube faces
span {
@include transform-origin(0 0);
position: absolute;
height: $size;
width: $size;
// top
&:nth-child(1) {
@include transform(rotate(210deg) skewX(-30deg) scaleY(0.864));
background: lighten($color, 16%);
}
// left
&:nth-child(2) {
@include transform(rotate(90deg) skewX(-30deg) scaleY(0.864));
background: $color;
}
// right
&:nth-child(3) {
@include transform(rotate(-30deg) skewX(-30deg) scaleY(0.864));
background: lighten($color, 8%);
}
}
}
// wireframe
&.wireframe {
$border-color: #000;
$border-width: $size * .05;
.cube {
span {
background: #fff;
box-shadow: inset (-$border-width/4) (-$border-width/4) 0 $border-width $border-color;
}
&:nth-child(2) {
span {
box-shadow: inset (-$border-width/2) (-$border-width/2) 0 $border-width*2 $border-color;
}
}
}
}
}
// demo styling
body {
text-align: center;
.logo {
display: inline-block;
margin: 20px 20px 10px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.