Skip to content

Instantly share code, notes, and snippets.

@TerryMooreII

TerryMooreII/jsbin.tivofa.css

Created August 8, 2014 01:07
Show Gist options
  • Save TerryMooreII/3203e667bae1bd2a4294 to your computer and use it in GitHub Desktop.
Save TerryMooreII/3203e667bae1bd2a4294 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.tivofa.css
.container {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
opacity:.8;
font-size:45px;
text-align:center;
line-height:200px;
}
#cube figure {
width: 196px;
height: 196px;
display: block;
position: absolute;
border: 2px solid black;
}
#cube .one { transform: rotateY( 0deg ); background-color:red; }
#cube .two { transform: rotateX( 180deg ); background-color:red;}
#cube .three { transform: rotateY( 90deg ); background-color:red;}
#cube .four { transform: rotateY( -90deg ); background-color:red;}
#cube .five { transform: rotateX( 90deg ); background-color:red;}
#cube .six { transform: rotateX( -90deg ); background-color:red;}
#cube .one { transform: rotateY( 0deg ) translateZ( 100px ); }
#cube .two { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .three { transform: rotateY( 90deg ) translateZ( 100px ); }
#cube .four { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .five { transform: rotateX( 90deg ) translateZ( 100px ); }
#cube .six { transform: rotateX( -90deg ) translateZ( 100px ); }
#cube { transform: translateZ( -100px ); }
#cube.show-one { transform: translateZ( -100px ) rotateY( 0deg ); }
#cube.show-two { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube.show-three { transform: translateZ( -100px ) rotateY( -90deg ); }
#cube.show-four { transform: translateZ( -100px ) rotateY( 90deg ); }
#cube.show-five { transform: translateZ( -100px ) rotateX( -90deg ); }
#cube.show-six { transform: translateZ( -100px ) rotateX( 90deg ); }
#cube { transition: transform 1s; }
.dot{
width:50px;
height:50px;
background-color:white;
border:1px solid #333;
border-radius:50%;
}
.placeholder{
width:50px;
height:50px;
}
ul, li{
margin:0px;
padding:0px;
}
li{
list-style:none;
margin:10px 5px;
}
ul{
float:left;
}
.dot-container{
margin-top:-2px;
display: inline-block;
}
#menu{
margin-bottom:100px
}
Raw
jsbin.tivofa.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="menu">
<button id="roll">Roll</button>
</div>
<section class="container">
<div id="cube" class="show-four">
<figure class="one">
<div class="dot-container">
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
</div>
</figure>
<figure class="two">
<div class="dot-container">
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
</div>
</figure>
<figure class="three">
<div class="dot-container">
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
</div>
</figure>
<figure class="four">
<div class="dot-container">
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
</div>
</figure>
<figure class="five">
<div class="dot-container">
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="dot"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="dot"></div></li>
</ul>
</div>
</figure>
<figure class="six">
<div class="dot-container">
<ul>
<li><div class="dot"></div></li>
<li><div class="dot"></div></li>
<li><div class="dot"></div></li>
</ul>
<ul>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
<li><div class="placeholder"></div></li>
</ul>
<ul>
<li><div class="dot"></div></li>
<li><div class="dot"></div></li>
<li><div class="dot"></div></li>
</ul>
</div>
</figure>
</div>
</section>
</body>
</html>
Raw
jsbin.tivofa.js
var roll = function roll(){
var random = Math.floor(Math.random() * 6) + 1;
showSide(random);
};
var showSide = function showSide(side){
var sides = ['one', 'two', 'three', 'four', 'five', 'six'];
$container = $('#cube');
$container.attr('class', '');
$container.addClass('show-'+sides[side]);
};
$('#roll').on('click', roll);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment