Spinning dice into a dark cup!
Forked from Alec Taylor's Pen YATZEE!!!.
A Pen by Captain Anonymous on CodePen.
<div id="background"> | |
<div class="container"> | |
<div class="dice animate"> | |
<div class="panel"> | |
<div class="middle"></div> | |
</div> | |
<div class="panel"> | |
<div class="TL"></div> | |
<div class="BR"></div> | |
</div> | |
<div class="panel"> | |
<div class="TL"></div> | |
<div class="TR"></div> | |
<div class="LM"></div> | |
<div class="RM"></div> | |
<div class="BL"></div> | |
<div class="BR"></div> | |
</div> | |
<div class="panel"> | |
<div class="TL"></div> | |
<div class="TR"></div> | |
<div class="middle"></div> | |
<div class="BR"></div> | |
<div class="BL"></div> | |
</div> | |
<div class="panel"> | |
<div class="TL"></div> | |
<div class="TR"></div> | |
<div class="BL"></div> | |
<div class="BR"></div> | |
</div> | |
<div class="panel"> | |
<div class="TL"></div> | |
<div class="middle"></div> | |
<div class="BR"></div> | |
</div> | |
</div> | |
</div> | |
</div> |
@dot: 20px; | |
@size: 100px; | |
#background { | |
height: 2000px; | |
width: 100%; | |
background-color: green; | |
} | |
// MIXIN - set blur | |
.diceSettings(@scale: 1, @blur: 0px) { | |
-webkit-filter : blur(@blur); | |
-moz-filter : blur(@blur); | |
-ms-filter : blur(@blur); | |
-o-filter : blur(@blur); | |
filter : blur(@blur); | |
-webkit-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale); | |
-moz-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale); | |
-ms-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale); | |
-o-transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale); | |
transform : scaleX(@scale) scaleY(@scale) scaleZ(@scale); | |
} | |
// MIXIN - animate spinning dice | |
.animateDice(@speed) { | |
-webkit-animation : spinningH @speed infinite linear; | |
-moz-animation : spinningH @speed infinite linear; | |
-ms-animation : spinningH @speed infinite linear; | |
-o-animation : spinningH @speed infinite linear; | |
animation : spinningH @speed infinite linear; | |
} | |
@-webkit-keyframes spinningH { | |
from { | |
-webkit-transform:rotateX(0deg) rotateY(0deg); | |
} | |
to{ | |
-webkit-transform:rotateX(360deg) rotateY(360deg); | |
} | |
} | |
// MIXIN - create dice faces | |
.makeFaces(@tranZ) { | |
&>div:nth-child(1) { | |
-webkit-transform : translateZ(@tranZ); | |
-moz-transform : translateZ(@tranZ); | |
-ms-transform : translateZ(@tranZ); | |
-o-transform : translateZ(@tranZ); | |
transform : translateZ(@tranZ); | |
} | |
&>div:nth-child(2) { | |
-webkit-transform : rotateY(90deg) translateZ(@tranZ); | |
-moz-transform : rotateY(90deg) translateZ(@tranZ); | |
-ms-transform : rotateY(90deg) translateZ(@tranZ); | |
-o-transform : rotateY(90deg) translateZ(@tranZ); | |
transform : rotateY(90deg) translateZ(@tranZ); | |
} | |
&>div:nth-child(3) { | |
-webkit-transform : rotateY(180deg) translateZ(@tranZ); | |
-moz-transform : rotateY(180deg) translateZ(@tranZ); | |
-ms-transform : rotateY(180deg) translateZ(@tranZ); | |
-o-transform : rotateY(180deg) translateZ(@tranZ); | |
transform : rotateY(180deg) translateZ(@tranZ); | |
} | |
&>div:nth-child(4) { | |
-webkit-transform : rotateY(-90deg) translateZ(@tranZ); | |
-moz-transform : rotateY(-90deg) translateZ(@tranZ); | |
-ms-transform : rotateY(-90deg) translateZ(@tranZ); | |
-o-transform : rotateY(-90deg) translateZ(@tranZ); | |
transform : rotateY(-90deg) translateZ(@tranZ); | |
} | |
&>div:nth-child(5) { | |
-webkit-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg); | |
-moz-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg); | |
-ms-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg); | |
-o-transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg); | |
transform : rotateX(-90deg) translateZ(@tranZ) rotate(180deg); | |
} | |
&>div:nth-child(6) { | |
-webkit-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg); | |
-moz-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg); | |
-ms-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg); | |
-o-transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg); | |
transform : rotateX(90deg) translateZ(@tranZ) rotate(180deg); | |
} | |
} | |
.dice{ | |
position: relative; | |
margin: 0 auto; | |
-webkit-transition : -webkit-transform 2s linear; | |
-moz-transition : -moz-transform 2s linear; | |
-ms-transition : -ms-transform 2s linear; | |
-o-transition : -o-transform 2s linear; | |
transition : transform 2s linear; | |
-webkit-transform-style : preserve-3d; | |
-moz-transform-style : preserve-3d; | |
-ms-transform-style : preserve-3d; | |
-o-transform-style : preserve-3d; | |
transform-style : preserve-3d; | |
height: @size * 2; | |
width: @size * 2; | |
.panel { | |
height: @size; | |
width: @size; | |
top: 25%; | |
left: 30%; | |
border-radius: @size / 20; /* THIS CAN REALLY GOING TO HAMMER YOUR PAGE PAINT TIME!!! */ | |
position: absolute; | |
background-color: #f9efe0; | |
background-position:center center; | |
/* box-shadow: 0px 0px 1px 2px #ccc; AS CAN THIS */ | |
border: 1px solid #ccc; | |
&>div { | |
background-color: #222; | |
position: absolute; | |
height: @size / 5; | |
width: @size / 5; | |
border-radius: @size / 5; | |
} | |
} | |
.makeFaces(@size / 2); | |
} | |
// Generic dot positions | |
.middle { | |
top: 40%; | |
left: 40%; | |
} | |
.LM, .RM { | |
top: 40%; | |
} | |
.TL, .TR { | |
top: 15%; | |
} | |
.BL, .BR { | |
bottom: 15%; | |
} | |
.TL, .BL, .LM { | |
left: 15%; | |
} | |
.TR, .BR, .RM { | |
right: 15%; | |
} | |
.container { | |
position: fixed; | |
-webkit-perspective : 500px; | |
-moz-perspective : 500px; | |
-ms-perspective : 500px; | |
-o-perspective : 500px; | |
perspective : 500px; | |
-webkit-perspective-origin : 50% 50%; | |
-moz-perspective-origin : 50% 50%; | |
-ms-perspective-origin : 50% 50%; | |
-o-perspective-origin : 50% 50%; | |
perspective-origin : 50% 50%; | |
} | |
.container:nth-child(1) { | |
top: 30%; | |
left: 40%; | |
.animate{ | |
.animateDice(4s); | |
} | |
} | |
.container:nth-child(2) { | |
top: 20%; | |
left: 30%; | |
.animate{ | |
.animateDice(5s); | |
} | |
.diceSettings(0.5, 1px); | |
} | |
.container:nth-child(3) { | |
top: 10%; | |
left: 20%; | |
.animate{ | |
.animateDice(2s); | |
} | |
.diceSettings(0.8, 0.5px); | |
} | |
.container:nth-child(4) { | |
top: 40%; | |
left: 70%; | |
.animate{ | |
.animateDice(2s); | |
} | |
.diceSettings(0.2, 1.5px); | |
} | |
.container:nth-child(5) { | |
top: 20%; | |
left: 80%; | |
.animate{ | |
.animateDice(2s); | |
} | |
.diceSettings(1, 0px); | |
} | |
.container:nth-child(6) { | |
top: 20%; | |
left: 60%; | |
.animate{ | |
.animateDice(6s); | |
} | |
.diceSettings(1.5, 0px); | |
} |
Spinning dice into a dark cup!
Forked from Alec Taylor's Pen YATZEE!!!.
A Pen by Captain Anonymous on CodePen.