SCSS
/* [Vars] *********************************************************/
$width : 100px;
$height : $width / 2;
$hole-size: 50px; // Must be less than width
// Angle of view for box and shadow
$angle-X: -45deg;
$angle-Y: 45deg;
$colour-first: #D74142;
$colour-second: #BE90D4;
$colour-third: #F4D03F;
$colour-background: #6BB9F0;
body {
background-color: $colour-background;
}
.boxes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.shadow {
position: absolute;
bottom: -60px;
width: $width;
height: $width;
background-color: #464646;
border-radius: 50%;
transition: all 300ms ease;
transform: rotateX($angle-X);
opacity: 0;
}
/* [Box] *********************************************************/
.scene {
display: inline-block;
margin: 60px;
width: $width;
height: $height;
perspective: 1800px;
}
.box {
position: relative;
width: inherit;
height: inherit;
transform-style: preserve-3d;
transform: rotateX($angle-X) rotateY($angle-Y);
transition: all 300ms ease;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
cursor: pointer;
z-index: 10;
}
.box:hover {
transform: rotateX(-45deg) rotateY(135deg) translateY(-40px);
}
.box:hover + .shadow {
opacity: 0.1;
}
.face {
position: absolute;
width: inherit;
height: inherit;
}
.top {
width: inherit;
height: ($width - $hole-size) / 2;
}
.outer {
width: inherit;
height: inherit;
}
.bottom {
width: inherit;
height: ($width - $hole-size) / 2;
}
.inner {
width: $hole-size;
height: inherit;
}
.top.front {
transform: rotateX(90deg) translate3d(0, $height - (($width - $hole-size) / 4), ($width - $hole-size) / 4);
}
.top.back {
transform: rotateX(90deg) translate3d(0, -($height - (($width - $hole-size) / 4)), ($width - $hole-size) / 4);
}
.top.left {
transform: rotateY(90deg) rotateX(90deg) translate3d(0, $height - (($width - $hole-size) / 4), ($width - $hole-size) / 4);
}
.top.right {
transform: rotateY(90deg) rotateX(90deg) translate3d(0, -($height - (($width - $hole-size) / 4)), ($width - $hole-size) / 4);
}
.outer.front {
transform: translate3d(0, 0, $width/2);
}
.outer.back {
transform: rotateY(180deg) translate3d(0, 0, $width / 2);
}
.outer.left {
transform: rotateY(-90deg) translate3d(0, 0, $width / 2);
}
.outer.right {
transform: rotateY(90deg) translate3d(0, 0, $width / 2);
}
.bottom.front {
transform: rotateX(-90deg) translate3d(0, $height - (($width - $hole-size) / 4), ($width / 2) - ($width - $hole-size) / 4);
}
.bottom.back {
transform: rotateX(-90deg) translate3d(0, -($height - (($width - $hole-size) / 4)), ($width / 2) - ($width - $hole-size) / 4);
}
.bottom.left {
transform: rotateY(-90deg) rotateX(-90deg) translate3d(0, $height - (($width - $hole-size) / 4), ($width / 2) - ($width - $hole-size) / 4);
}
.bottom.right {
transform: rotateY(-90deg) rotateX(-90deg) translate3d(0, -($height - (($width - $hole-size) / 4)), ($width / 2) - ($width - $hole-size) / 4);
}
.inner.front {
transform: translate3d(($width - $hole-size) / 2, 0, $hole-size / 2);
}
.inner.back {
transform: rotateY(180deg) translate3d(-($width - $hole-size) / 2, 0, $hole-size / 2);
}
.inner.left {
transform: rotateY(90deg) translate3d(0, 0, ($width / 2) - $hole-size);
}
.inner.right {
transform: rotateY(90deg) translate3d(0, 0, $width / 2);
}
/* [Shading] *********************************************************/
@mixin shading($color) {
.face {
background-color: $color;
}
.outer.front,
.outer.back,
.inner.front,
.inner.back {
background-color: darken($color, 10%);
}
.outer.left,
.inner.right {
background-color: darken($color, 20%);
}
.bottom {
background-color: darken($color, 20%);
}
// Maintain correct shading when box is rotated
&:hover .face.outer.left,
&:hover .face.inner.right {
background-color: darken($color, 10%);
}
&:hover .face.outer.back,
&:hover .face.inner.front {
background-color: darken($color, 20%);
}
}
// Apply the shading
.scene:first-child .box {
@include shading($colour-first);
}
.scene:nth-child(2) .box {
@include shading($colour-second);
}
.scene:last-child .box {
@include shading($colour-third);
}
