@Pipop

Как сделать анимацию разворота картинки?

У меня есть две картинки:
5ecfbdfface08277536138.png
5ecfbdf0bc7b5042381317.png

Изначальное состояние — сбоку. Вообще, возможно ли создать анимацию, при которой телефон плавно переходит во второе состояние?
  • Вопрос задан
  • 561 просмотр
Пригласить эксперта
Ответы на вопрос 1
Четыре варианта сделать анимацию поворота айфона:

вариант 1
берёшь первую картинку и поворачиваешь её в css с помощью transform: rotate3d
Будет плоско, потому что у картинки айфона нет толщины. Зато дёшево и сердито по времени, ресурсам, трудозатратам, нервам и т.д.

вариант 2
берёшь где-то 3D-модель айфона с чистым экраном. Открываешь в 3D-редакторе (blender, 3dmax и пр.), фигачишь на него скриншот сайта и делаешь покадровую анимацию поворота. Склеиваешь кадры анимации в gif, mp4 или webp.

вариант 3
берёшь 3D-модель и с помощью WebGL отрисовываешь её прям на странице. А так как это 3D, то вращать можешь так, как твоей душеньке угодно - под любыми углами и с любой скоростью.

вариант 4
берёшь айфон, камеру, ватман для фона и крутящуюся подставку.
крепишь айфон на крутящуюся подставку, выставляешь камеру, свет, фон. И начинаешь поворачивать айфон, делая кадры на камеру. Потом, как во втором варианте, склеиваешь фотографии в анимацию в формате mp4, webp или gif
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы