Анимация блока из раскладывающихся плиток

#javascript #css #html5 #scss #jsx

Учусь работать с анимациями в css3 и возникла мысль, реализовать следующее решение.



Есть кнопка данного вида (первое изображение на скриншоте).
 Необходимо, чтобы при переходе на страницу данная кнопка разворачивалась, как на
втором изображении на скриншоте.
 То есть, сперва появляется первая секция (нумерация на втором изображении), затем,
как будто перелистывается лист и появляется вторая секция, потом снова перелистывание
только вниз и проявляется третья секция, перелистывание влево и проявляется четвёртая
секция, итогом становится полная кнопка.
 Реально ли такое реализовать, и если да, то как? 
 Готовых или похожих примеров найти не получилось.
 Буду очень благодарен за подсказки или хотя бы схематичное решение.
    

Ответы

Ответ 1

.c-weird-btn {
  position: relative;
  width: 10rem; height: 10rem;
  perspective: 600px; }

  .c-weird-btn .o-tile {
    position: absolute;
    width: 50%; height: 50%; 
    background: no-repeat radial-gradient(circle at 100% 100%, #0dd, #0dd 33%, transparent
33%) #a7e; }

  .c-weird-btn .o-tile:nth-of-type(2) {
    transform-origin: right center;
    animation: wb-t-tr 0.5s ease-out 0.1s forwards; }
  .c-weird-btn .o-tile:nth-of-type(3) {
    transform-origin: left center;
    animation: wb-t-bl 0.5s ease-out 0.9s forwards; }
  .c-weird-btn .o-tile:nth-of-type(4) {
    transform-origin: center bottom;
    animation: wb-t-br 0.5s ease-out 0.5s forwards; }

@keyframes wb-t-tr {
  50%  { filter: brightness(75%); }
  100% { transform: rotateY(180deg); } }
@keyframes wb-t-bl {
  0%   { bottom: 0; right: 0; background-image: radial-gradient(circle at 0 0, #0dd,
#0dd 33%, transparent 33%); }
  50%  { filter: brightness(75%); }
  100% { bottom: 0; right: 0; background-image: radial-gradient(circle at 0 0, #0dd,
#0dd 33%, transparent 33%); transform: rotateY(-180deg); } }
@keyframes wb-t-br {
  0%   { right: 0; background-image: radial-gradient(circle at 0 100%, #0dd, #0dd
33%, transparent 33%); }
  50%  { filter: brightness(75%); }
  100% { right: 0; background-image: radial-gradient(circle at 0 100%, #0dd, #0dd
33%, transparent 33%); transform: rotateX(-180deg); } }

  

  

  

  






Поместить изображения на тайлы можно не только через background-image самого тайла
(как в примере), но и добавив каждому из них вложенные элементы лицевой и оборотной
сторон. Во втором случае, видимость сторон надо будет переключать в кадрах анимации
(на 50%, что соответствует положению "на ребре").