Повернуть изображение бутылки в HTML

Я ищу способ повернуть изображение бутылки в HTML, чтобы достичь a similar effect. Идея состоит в том, чтобы показать целую метку, а не только ее часть.Повернуть изображение бутылки в HTML

Просто маскировка этикетку на верхней части бутылки, вероятно, не очень хороший вариант, так как она должна быть «3d», чтобы выглядеть естественно.

источник

2017-01-27 Marcello M

Использовать свойство преобразования CSS3? – Atrix

@Atrix Либо это, либо spritesheet, анимированный Javascript, возможно через: http://spritespin.ginie.eu/ –

Возможно, это может дать вам некоторые идеи - http://stackoverflow.com/questions/27781634/rotating-globe -в-CSS/27781670 # 27781670. Хотя я не думаю, что это обман. – Harry

два варианта:

Сначала, чтобы получить этот GIF (если у вас уже есть GIF или последовательность PNG) грим последовательность анимации (Если у вас есть 3D-проект можно также генерировать изображения из 3D программного обеспечения). Затем используйте некоторые рамки canvas2d и просмотрите эту последовательность.

Вы можете сделать это также с помощью классических html-тегов и таймеров.

Для защиты этого объекта Secund использует трёхмерные или подобные webgl-двигатели. Чем просто вращение в 3d пространстве. Blender - это бесплатное ПО. Импортировать объект (obj) intro blender. Перейдите в режим редактирования и выберите лица для текстур ботов - нажмите «тип разворота», вставьте изображение. Экспорт из блендера в объект. Посмотрите, как загрузить obj с тэгом .js с текстурами.

Оба проекта просты, и они могут работать на всех устройствах (настольных/мобильных устройствах).

Если вы хотите использовать мою библиотеку (canvas2d) для анимации см:

Visual js game engine

Возьмите класс вид анимации:

Animation class

ссылка:

Gif файл раскол кадр за кадром

http://ezgif.com/split

источник

2017-01-27 12:48:29