Делаем разметку HTML:
Пишем стиль:
Смотрим результат наших трудов:
HTML:
<div id="dice">
<div class="dice-box">
<span class="one-h">W</span><span class="two-e">z</span><span class="three-l">o</span><span class="four-l">n</span><span class="five-o">e</span><span class="six-e">s</span>
</div>
</div>
CSS:
body {
background-image: radial-gradient(#e7f7ff, #ffdaac);
height: 100vh;
}
#dice {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#dice span {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #fff;
font-family: monospace;
font-size: 3rem;
color: #555;
margin: 5px;
transition: all .4s ease-in-out;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-webkit-transform-origin: center;
transform-origin: center;
position: relative;
}
#dice span.one-h {
-webkit-transform: skew(0deg, -20deg) rotatey(45deg) translate(310px, 50px);
transform: skew(0deg, -20deg) rotatey(45deg) translate(310px, 50px);
}
#dice span.two-e {
-webkit-transform: rotatex(68deg) rotatez(45deg) translate(-27px, -237px);
transform: rotatex(68deg) rotatez(45deg) translate(-27px, -237px);
z-index: 1;
}
#dice span.three-l {
-webkit-transform: skew(0deg, 20deg) rotatey(-45deg);
transform: skew(0deg, 20deg) rotatey(-45deg);
margin-right: -10px;
z-index: 1;
}
#dice span.four-l {
-webkit-transform: skew(0deg, -20deg) rotatey(45deg);
transform: skew(0deg, -20deg) rotatey(45deg);
margin-left: -10px;
z-index: 1;
}
#dice span.five-o {
-webkit-transform: rotatex(-68deg) rotatez(-45deg) translate(-175px, -40px);
transform: rotatex(-68deg) rotatez(-45deg) translate(-175px, -40px);
z-index: 0;
}
#dice span.six-e {
-webkit-transform: skew(0deg, 20deg) rotatey(-45deg) translate(-312px, 50px);
transform: skew(0deg, 20deg) rotatey(-45deg) translate(-312px, 50px);
z-index: 0;
}
#dice .dice-box {
display: flex;
}
#dice .dice-box:hover span {
-webkit-transform: initial;
transform: initial;
margin: 5px;
-webkit-animation: .4s spin ease-in-out;
animation: .4s spin ease-in-out;
}