Четыре варианта сделать анимацию поворота айфона:
вариант 1
берёшь первую картинку и поворачиваешь её в css с помощью transform:
rotate3d
Будет плоско, потому что у картинки айфона нет толщины. Зато дёшево и сердито по времени, ресурсам, трудозатратам, нервам и т.д.
вариант 2
берёшь где-то 3D-модель айфона с чистым экраном. Открываешь в 3D-редакторе (blender, 3dmax и пр.), фигачишь на него скриншот сайта и делаешь покадровую анимацию поворота. Склеиваешь кадры анимации в gif, mp4 или webp.
вариант 3
берёшь 3D-модель и с помощью WebGL отрисовываешь её прям на странице. А так как это 3D, то вращать можешь так, как твоей душеньке угодно - под любыми углами и с любой скоростью.
вариант 4
берёшь айфон, камеру, ватман для фона и крутящуюся подставку.
крепишь айфон на крутящуюся подставку, выставляешь камеру, свет, фон. И начинаешь поворачивать айфон, делая кадры на камеру. Потом, как во втором варианте, склеиваешь фотографии в анимацию в формате mp4, webp или gif
Средний
