Разработка - Креативное название сайта | Все для вебмастера

Делаем разметку 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;
}

Смотрим результат наших трудов:

Реакции: 25517

Разработка Креативное название сайта

Ещё ресурсы от baltun