/* START: comment... begin code - diceroll.css */ /* << ------------------------------------------------------------ >> */ /* CSS DICE ANIMATIONS - STYLE: dice... spin / spin-duplicate default "idle" animation */ @keyframes spin { 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); } 33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); } 50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); } 66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); } 83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); } 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } @keyframes spin-duplicate { 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); } 33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); } 50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); } 66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); } 83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); } 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } /* roll animation when interacting with CSS dice animation button */ @keyframes roll { 0% { transform: translate3d(-100px,-25px,-200px) } 12% { transform: translate3d(0px,0,-50px) } 25% { transform: translate3d(100px,-25px,-200px) } 37% { transform: translate3d(0px,-50px,-400px) } 50% { transform: translate3d(-100px,-25px,-200px) } 62% { transform: translate3d(0px,0,-50px) } 75% { transform: translate3d(100px,-25px,-200px) } 87% { transform: translate3d(0px,-50px,-400px) } 100% { transform: translate3d(-100px,-25px,-200px) } } /* << ------------------------------------------------------------ >> */ /* BODY CONTAINERS: dicewrapper & platform inside main in html */ #dicewrapper { /* "dicewrapper" div style... positioning: DYNAMIC bottom positioning... */ position: absolute; bottom: 0; left: 0; width: 45px; margin: auto auto 0 0; /* t r b l */ } /* "platform" div style... positioning */ #platform { position: absolute; left: 0; bottom: 0; } /* << ------------------------------------------------------------ >> */ /* "DICE" DIV: basic style for "dice" div (positioning, w*h, apply animations) */ #dice { position: absolute; left: 150px; bottom: 35px; width: 45px; height: 45px; transform-style: preserve-3d; animation: spin 50s infinite linear; transition: transform 1.5s ease-out; } /* "dice" div hover style: change cursor to pointer also pause "idle" animation(?) */ #dice:hover { cursor: pointer; } #dice .idleAnimate { transform-style: preserve-3d; animation: spin 50s infinite linear; } /* < -------------------- > */ /* "SIDES" divs: base style for "sides" div class: bg, positioning, shadow, opacity (via rgba), edges rounded/sharp */ .sides { background-color: #efe5dc; background-color: rgba(239, 229, 220, 0.5); position: absolute; width: 45px; height: 45px; box-shadow: inset 0 0 18px #cccccc; box-shadow: inset 0 0 18px rgba(204, 204, 204, 1.0); border-radius: 18px; } /* << ------------------------------------------------------------ >> */ /* CSS "DICE COVER" DIVS: "cover" divs tell the CSS animation to move the dice through the X, Y, and Z planes */ /* "cover" & "inner" divs base style: bg, shadow (inset) "sides" bg-color... #efe5dc / rgba(239, 229, 220, 0.8) [ ALT: #ffffff / rgba(255, 255, 255, 0.8) ] "cover" & "inner" bg-color -- default... #e0e0e0 / rgba(224, 224, 224, 0.8) */ /* "cover" - ugly interior structures & corners */ #dice .cover { background-color: #e0e0e0; background-color: rgba(224, 224, 224, 0.9); box-shadow: none; } /* "innner" - 'glow color' from within the dice */ #dice .inner { background-color: #e0e0e0; background-color: rgba(224, 224, 224, 0.6); box-shadow: none; } /* tell CSS animation to... ".cover" (Z), ".cover.x" (Y_, and ".cover.z" (X) */ #dice .cover { border-radius: 0; transform: translateZ(0px); } #dice .cover.x { transform: rotateY(90deg); } #dice .cover.z { transform: rotateX(90deg); } /* < -------------------- > */ /* "DICE SIDE" & "INNER" DIVS: "#dice .side-#" divs... define which transformations correspond to which side (number value) of the dice "#dice .side-#.inner" divs... translate & rotate faces of dice for "side inner" divs -- f ba - r l - t bo ... covers up empty space left in corners when making dice sides rounded instead of sharp */ /* "front" / "back" */ #dice .side-1 { transform: translateZ(22.5px); } #dice .side-1.inner { transform: translateZ(21.5px); } #dice .side-2 { transform: rotateX(-180deg) translateZ(22.5px); } #dice .side-2.inner { transform: rotateX(-180deg) translateZ(21.5px); } /* "right" / "left" */ #dice .side-3 { transform: rotateY(90deg) translateZ(22.5px); } #dice .side-3.inner { transform: rotateY(90deg) translateZ(21.5px); } #dice .side-4 { transform: rotateY(-90deg) translateZ(22.5px); } #dice .side-4.inner { transform: rotateY(-90deg) translateZ(21.5px); } /* "top" / "bottom" */ #dice .side-5 { transform: rotateX(90deg) translateZ(22.5px); } #dice .side-5.inner { transform: rotateX(90deg) translateZ(21.5px); } #dice .side-6 { transform: rotateX(-90deg) translateZ(22.5px); } #dice .side-6.inner { transform: rotateX(-90deg) translateZ(21.5px); } /* << ------------------------------------------------------------ >> */ /* "DOT" DIV: base style for ".dot" div: positioning, border & bg, 50% transform for symmetry, opacity (via rgba) & shadow */ .dot { display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); box-shadow: inset 5px 0 10px #000000; box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.7); } /* < -------------------- > */ /* "SIDE DOT" DIVS: ".side-# .dot-#" divs apply dots to sides of dice and arrange them into a grid-like formation */ .side-1 .dot-1 { top: 50%; left: 50%; } .side-2 .dot-1 { top: 25%; left: 25%; } .side-2 .dot-2 { top: 75%; left: 75%; } .side-3 .dot-1 { top: 25%; left: 25%; } .side-3 .dot-2 { top: 75%; left: 75%; } .side-3 .dot-3 { top: 50%; left: 50%; } .side-4 .dot-1 { top: 25%; left: 25%; } .side-4 .dot-2 { top: 25%; left: 75%; } .side-4 .dot-3 { top: 75%; left: 25%; } .side-4 .dot-4 { top: 75%; left: 75%; } .side-5 .dot-1 { top: 25%; left: 25%; } .side-5 .dot-2 { top: 25%; left: 75%; } .side-5 .dot-3 { top: 75%; left: 25%; } .side-5 .dot-4 { top: 75%; left: 75%; } .side-5 .dot-5 { top: 50%; left: 50%; } .side-6 .dot-1 { top: 25%; left: 25%; } .side-6 .dot-2 { top: 25%; left: 75%; } .side-6 .dot-3 { top: 75%; left: 25%; } .side-6 .dot-4 { top: 75%; left: 75%; } .side-6 .dot-5 { top: 50%; left: 25%; } .side-6 .dot-6 { top: 50%; left: 75%; } /* << ------------------------------------------------------------ >> */ /* "DICE DATA" DIVS: "#dice[data=#]" divs define how to transform dice after landing on a given side */ #dice[data-side="1"] { transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg); } #dice[data-side="2"] { transform: rotateX(360deg) rotateY(540deg) rotateZ(720deg); } #dice[data-side="3"] { transform: rotateX(360deg) rotateY(630deg) rotateZ(720deg); } #dice[data-side="4"] { transform: rotateX(360deg) rotateY(450deg) rotateZ(720deg); } #dice[data-side="5"] { transform: rotateX(630deg) rotateY(360deg) rotateZ(720deg); } #dice[data-side="6"] { transform: rotateX(450deg) rotateY(360deg) rotateZ(720deg); } /* < -------------------- > */ /* "DICE DATA REROLL" DIVS: "#dice[data=#].reRoll" divs define how to transform dice (on consecutive rolls) after landing on a given side */ #dice[data-side="1"].reRoll { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } #dice[data-side="2"].reRoll { transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); } #dice[data-side="3"].reRoll { transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg); } #dice[data-side="4"].reRoll { transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); } #dice[data-side="5"].reRoll { transform: rotateX(270deg) rotateY(0deg) rotateZ(0deg); } #dice[data-side="6"].reRoll { transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg); } /* << ------------------------------------------------------------ >> */ /* "DICE CONTAINER" DIV: "#dicecontainer" div encompasses the entire screen... useful for sizing & positionig other divs later */ #dicecontainer { position: fixed; z-index: -1; width: 100%; height: 100%; } /* << ------------------------------------------------------------ >> */ /* END: comment... fin. code - diceroll.css */