Разбираем анимацию с сайта junni.co.jp. 1. Делаем сетку на grid-ах 4 на 4, где каждый элемент отдельное изображение. 2. Прописываем базовые стили. 3. Устанавливаем перспективу на контейнер, чтобы добавить вращение содержимого. 4. Устанавливаем preserve-3d на внутренний элемент чтобы создать вращение. 5. Скрываем фронтальную и заднюю часть при повороте. 6. Поворачиваем заднюю часть на 180 градусов по оси X. 7. При наведении поворачиваем на 360 градусов по оси X.
Разбираем анимацию с сайта junni.co.jp.
1. Делаем сетку на grid-ах 4 на 4, где каждый элемент отдельное изображение.
2. Прописываем базовые стили.
3. Устанавливаем перспективу на контейнер, чтобы добавить вращение содержимого.
4. Устанавливаем preserve-3d на внутренний элемент чтобы создать вращение.
5. Скрываем фронтальную и заднюю часть при повороте.
6. Поворачиваем заднюю часть на 180 градусов по оси X.
7. При наведении поворачиваем на 360 градусов по оси X.
Результат
