Youtube link - Click here
Source code - Creating a dice using HTML CSS :
<!DOCTYPE html>
<html>
<head>
<title>
Dice
</title>
<style>
.container {
width: 100px;
margin: 0px auto;
position: relative;
text-align: center;
top: 200px;
transition: all 10s;
transform-style: preserve-3d;
}
.sides {
width: 100px;
height: 100px;
position: absolute;
box-sizing: border-box;
padding-top: 2.5em;
}
.first {
background-color: orange;
z-index: 1;
}
.second {
background-color: blue;
transform-origin: left;
transform: rotateY(90deg);
left: 100px;
}
.third {
background-color: pink;
transform: translateZ(-100px);
}
.fourth {
background-color: red;
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
.fifth {
background-color: violet;
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.sixth {
background-color: grey;
top: 100px;
transform-origin: top;
transform: rotateX(-90deg);
}
.container:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="container">
<div class="sides first">1</div>
<div class="sides second">2</div>
<div class="sides third">3</div>
<div class="sides fourth">4</div>
<div class="sides fifth">5</div>
<div class="sides sixth">6</div>
</div>
</body>
</html>
Post a Comment