203 lines
8.6 KiB
HTML
203 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - CSS only interactive 3D dice</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="center">
|
|
<div class="grid">
|
|
<!-- The three selectors below the dice-->
|
|
<!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
|
|
<!-- With CSS we'll always show on top the one that leads to the next state-->
|
|
<input class="radio y-radio" type="radio" name="y" value="1" checked="checked"/>
|
|
<input class="radio y-radio" type="radio" name="y" value="2"/>
|
|
<input class="radio y-radio" type="radio" name="y" value="3"/>
|
|
<input class="radio y-radio" type="radio" name="y" value="4"/>
|
|
<!-- A graphical indicator for the direction of the rotation-->
|
|
<!-- Consists of an arrow head and a bunch of tail parts-->
|
|
<!-- The 3D shape is made by CSS-->
|
|
<div class="arrow y-arrow">
|
|
<div class="head"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
</div>
|
|
<!-- The label showing up on hover indicating the current degree of the turn-->
|
|
<div class="degree y-degree" id="y1">0°</div>
|
|
<div class="degree y-degree" id="y2">90°</div>
|
|
<div class="degree y-degree" id="y3">180°</div>
|
|
<div class="degree y-degree" id="y4">270°</div>
|
|
<!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
|
|
<!-- With CSS we'll always show on top the one that leads to the next state-->
|
|
<input class="radio z-radio" type="radio" name="z" value="1" checked="checked"/>
|
|
<input class="radio z-radio" type="radio" name="z" value="2"/>
|
|
<input class="radio z-radio" type="radio" name="z" value="3"/>
|
|
<input class="radio z-radio" type="radio" name="z" value="4"/>
|
|
<!-- A graphical indicator for the direction of the rotation-->
|
|
<!-- Consists of an arrow head and a bunch of tail parts-->
|
|
<!-- The 3D shape is made by CSS-->
|
|
<div class="arrow z-arrow">
|
|
<div class="head"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
</div>
|
|
<!-- The label showing up on hover indicating the current degree of the turn-->
|
|
<div class="degree z-degree" id="z1">0°</div>
|
|
<div class="degree z-degree" id="z2">90°</div>
|
|
<div class="degree z-degree" id="z3">180°</div>
|
|
<div class="degree z-degree" id="z4">270°</div>
|
|
<!-- A set of radio buttons each representing a turn (0°, 90°, 180°, 270°)-->
|
|
<!-- With CSS we'll always show on top the one that leads to the next state-->
|
|
<input class="radio x-radio" type="radio" name="x" value="1" checked="checked"/>
|
|
<input class="radio x-radio" type="radio" name="x" value="2"/>
|
|
<input class="radio x-radio" type="radio" name="x" value="3"/>
|
|
<input class="radio x-radio" type="radio" name="x" value="4"/>
|
|
<!-- A graphical indicator for the direction of the rotation-->
|
|
<!-- Consists of an arrow head and a bunch of tail parts-->
|
|
<!-- The 3D shape is made by CSS-->
|
|
<div class="arrow x-arrow">
|
|
<div class="head"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
<div class="tail-part"></div>
|
|
</div>
|
|
<!-- The label showing up on hover indicating the current degree of the turn-->
|
|
<div class="degree x-degree" id="x1">0°</div>
|
|
<div class="degree x-degree" id="x2">90°</div>
|
|
<div class="degree x-degree" id="x3">180°</div>
|
|
<div class="degree x-degree" id="x4">270°</div>
|
|
<!-- The dice with each side-->
|
|
<!-- The 2D graphics of sides are defined here in SVGs-->
|
|
<!-- The overall 3D shape is made with CSS-->
|
|
<div class="dice">
|
|
<div class="box">
|
|
<svg class="front">
|
|
<circle cx="30" cy="30" r="20"></circle>
|
|
<circle cx="75" cy="30" r="20"></circle>
|
|
<circle cx="120" cy="30" r="20"></circle>
|
|
<circle cx="30" cy="120" r="20"></circle>
|
|
<circle cx="75" cy="120" r="20"></circle>
|
|
<circle cx="120" cy="120" r="20"></circle>
|
|
</svg>
|
|
<svg class="back">
|
|
<circle cx="75" cy="75" r="20"></circle>
|
|
</svg>
|
|
<svg class="left">
|
|
<circle cx="30" cy="30" r="20"></circle>
|
|
<circle cx="120" cy="120" r="20"></circle>
|
|
</svg>
|
|
<svg class="right">
|
|
<circle cx="30" cy="30" r="20"></circle>
|
|
<circle cx="120" cy="30" r="20"></circle>
|
|
<circle cx="30" cy="120" r="20"></circle>
|
|
<circle cx="120" cy="120" r="20"></circle>
|
|
<circle cx="75" cy="75" r="20"></circle>
|
|
</svg>
|
|
<svg class="top">
|
|
<circle cx="30" cy="30" r="20"></circle>
|
|
<circle cx="120" cy="30" r="20"></circle>
|
|
<circle cx="30" cy="120" r="20"></circle>
|
|
<circle cx="120" cy="120" r="20"></circle>
|
|
</svg>
|
|
<svg class="bottom">
|
|
<circle cx="30" cy="30" r="20"></circle>
|
|
<circle cx="75" cy="75" r="20"></circle>
|
|
<circle cx="120" cy="120" r="20"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="label">Click an axis to rotate</div>
|
|
</div>
|
|
</div>
|
|
<footer><a href="https://twitter.com/HunorBorbely" target="_blank">@HunorBorbely</a></footer>
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html>
|