Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Cube rotates when a trigger has been activated. Using CSS transforms, CSS 3D and CSS animation.
<h1 class="title">Rotating <span>Cube</span></h1>
<section>
<div class="cube-container">
<div class="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</div>
<div href="" class="cube-switch">
<span class="switch">
<span class="switch-state off">Off</span>
<span class="switch-state on">On</span>
</span>
</div>
</section>
if(Modernizr.csstransforms3d) {
$('.cube-switch .switch').click(function(){
if($('.cube').hasClass('spin') && $('.cube-switch').hasClass('active')){
$('.cube-switch').removeClass('active');
$('.cube').removeClass('spin');
} else {
$('.cube-switch').addClass('active');
$('.cube').addClass('spin');
}
});
}
@import "compass";
// = GLobals
//-------------------------------------------------------------------------------//
body {
background: red;
}
.title {
position: relative;
top: 3em;
color: white;
text-align: center;
text-transform: uppercase;
span {
display: block;
font-size: 1.85em;
line-height: .75em;
text-outline: black;
}
}
// = Keyframes
//-------------------------------------------------------------------------------//
@-webkit-keyframes spin {
from { @include transform(rotateX(0) rotateY(0)) }
to { @include transform(rotateX(360deg) rotateY(360deg)); }
}
@-moz-keyframes spin {
from { @include transform(rotateX(0) rotateY(0)); }
to { @include transform(rotateX(360deg) rotateY(360deg)); }
}
@-ms-keyframes spin {
from { @include transform(rotateX(0) rotateY(0)); }
to { @include transform(rotateX(360deg) rotateY(360deg)); }
}
@-o-keyframes spin {
from { @include transform(rotateX(0) rotateY(0)); }
to { @include transform(rotateX(360deg) rotateY(360deg)); }
}
@keyframes spin {
from { @include transform(rotateX(0) rotateY(0)); }
to { @include transform(rotateX(360deg) rotateY(360deg)); }
}
.spin {
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
// = Reflection
//-------------------------------------------------------------------------------//
.reflections {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.6)));
}
// = Cube Module
//-------------------------------------------------------------------------------//
// IE9 and below doens't support
// cssransforms3d but does support csstransforms
.csstransforms3d {
// =======BEGIN CUBE CONTAINER ======= //
.cube-container {
height: 200px;
margin: 0 auto;
position: relative;
top: 10em;
width: 200px;
// distance between the scene and the viewer
-moz-perspective:600px;
@include perspective(600px);
// vanishing point of perspective default is in middle of the scene
-moz-perspective-origin: 50% 50%;
@include perspective-origin(50% 50%);
}
// =======BEGIN CUBE ======= //
.cube {
height: 100%;
position: absolute;
@include transition($transition-1: .5s all ease-in-out);
// preserve 3fd effect of child elements
// default value is 'flat'
// preserve effects of child elements
-moz-transform-style: preserve-3d;
@include transform-style(preserve-3d);
/* panels global styles*/
@include transform(rotateX(-20deg) rotateY(28deg));
// tells browser not to render the back of the element
// Accepts visible | hidden
backface-visibility: visible;
width: 100%;
&:hover {
cursor: pointer;
// panels global hover styles
@include transform(rotateX(-50deg) rotateY(0deg));
}
figure {
@include box-sizing(border-box);
display: block;
height: 200px;
position: absolute;
width: 200px;
font-size: 2em;
line-height: 6em;
text-align: center;
}
}
// =======BEGIN CUBE PANELS======= //
.cube .front {
background: rgba(230,0,0,.5);
@extend .reflections;
@include transform(translateZ(100px));
}
.cube .back {
background: rgba(200,0,0,.6);
@extend .reflections;
@include transform(rotateY(180deg) rotateX(0deg) translateZ(100px));
}
.cube .left {
background: rgba(200,0,0,.5);
@extend .reflections;
@include transform(rotateY(-90deg) translateZ(100px));
}
.cube .right {
background: rgba(200,0,0,.4);
@extend .reflections;
@include transform(rotateY(90deg) translateZ(100px));
}
.cube .top {
background: rgba(200,0,0,.3);
@include transform(rotateX(90deg) translateZ(100px));
}
.cube .bottom {
background: rgba(50,50,50,.5);
@include transform(rotateX(-90deg) rotateZ(-180deg) translateZ(100px));
opacity: .55;
}
}
// = Cube Switch
//-------------------------------------------------------------------------------//
.cube-switch {
border-radius:10px;
border:1px solid rgba(0,0,0,0.4);
box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
/* Prevents clics on the back */
cursor:default;
display: block;
height: 100px;
position: relative;
left: -260px;
margin: 0 auto;
overflow:hidden;
/* Prevents clics on the back */
pointer-events:none;
width: 100px;
white-space: nowrap;
background:#333;
}
/* The switch */
.cube-switch .switch {
border:1px solid rgba(0,0,0,0.6);
border-radius:0.7em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -7px 0 rgba(0,0,0,0.2),
inset 0 50px 10px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.2);
display:block;
width: 60px;
height: 60px;
margin-left:-30px;
margin-top:-30px;
position:absolute;
top: 50%;
left: 50%;
width: 60px;
background:#666;
transition: all 0.2s ease-out;
/* Allows click */
cursor:pointer;
pointer-events:auto;
}
/* SWITCH Active State */
.cube-switch.active {
background:#222;
box-shadow:
0 0 5px rgba(0,0,0,0.5),
inset 0 50px 50px rgba(55,55,55,0.1);
}
.cube-switch.active .switch {
background:#333;
box-shadow:
inset 0 6px 0 rgba(255,255,255,0.1),
inset 0 7px 0 rgba(0,0,0,0.2),
inset 0 -50px 10px rgba(0,0,0,0.1),
0 1px 0 rgba(205,205,205,0.1);
}
.cube-switch.active:after,
.cube-switch.active:before {
background:#333;
box-shadow:
0 1px 0 rgba(255,255,255,0.1),
inset 1px 2px 1px rgba(0,0,0,0.5),
inset 3px 6px 2px rgba(200,200,200,0.1),
inset -1px -2px 1px rgba(0,0,0,0.3);
}
.cube-switch.active .switch:after,
.cube-switch.active .switch:before {
background:#222;
border:none;
margin-top:0;
height:1px;
}
.cube-switch .switch-state {
display: block;
position: absolute;
left: 40%;
color: #FFF;
font-size: .5em;
text-align: center;
}
/* SWITCH On State */
.cube-switch .switch-state.on {
bottom: 15%;
}
/* SWITCH Off State */
.cube-switch .switch-state.off {
top: 15%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.