Реализация 3d эффекта?

Question

[Max_Borisov]

Добрый день!
Интересует, как создать подобный 3d эффект при движении курсора - www.refletcommunication.com/en/experience
Можно ли его реализовать на обычных изображениях? Или только с помощью канваса такое можно достигнуть?

Comments

[twobomb]

Чето я не заметил никакого 3д эффекта, ты про эффект перехода этого слайдера?

[Max_Borisov]

нет, не про переход слайдера. поводите мышкой по экрану, увидите изменение фонового изображения.

[twobomb]

Значит у меня просто не работает.

Answer 1

[xmoonlight]

Без канваса - можно тоже такое сделать.
Просто поворот слоя в 3D-пространстве через CSS 3D deformation.
По линку - сделано вот на этом: www.pixijs.com

Пример 1
Пример 2
Пример 3

Искать: тут

Comments

[Max_Borisov]

я пытался сделать, меняя rotate, но картинка деформировалась и получалось очень криво. Есть примеры, как это можно сделать?

[xmoonlight]

Max_Borisov, исходник просите?

[Max_Borisov]

xmoonlight, было бы неплохо )
но мне нужно хотя бы направление, в каком двигаться.
тк вот таких примеров куча - https://codepen.io/eduard-malakhov/pen/mmJwbZ
но это все не то, тк если фон так "крутить" даже с меньшей амплитудой, получается совсем не тот эффект.

[xmoonlight]

Max_Borisov,
Там два слоя: кратер (ближе к смотрящему) и задний фон.
Вам нужно правильно составить перспективу и расстояние между этими слоями в 3D.
Затем - поворачивать через JS при смещении указателя "мыши".
Это называется 3D параллакс или просто псевдо-3D.

[Max_Borisov]

xmoonlight, то есть Вы имеете в виду, что-то типа такого?
https://codyhouse.co/demo/parallax-hero-image/inde...
Не подскажите, как "правильно составить перспективу и расстояние между этими слоями в 3D"?

[xmoonlight]

Max_Borisov, да, линк - прям 1-в-1 то, что я имел ввиду и как сделан эффект в вопросе. А правильно составить - нужно проектировать.
Вот что-то готовое удалось найти: https://www.jqueryscript.net/animation/3D-Hover-Ef...

[Степан Крапивин]

xmoonlight, хочу заметить, что в примере из топика есть страница с лошадью. И она 3D а не просто параллакс + 3D поворот плоского изображения.

[Max_Borisov]

Степан, мне кажется, там все эффекты подобным образом реализованы.

[Max_Borisov]

xmoonlight, то есть на канвасе и через обычную трансформацию - одинаковые решение?
разве можно сделать эффект, как на слайде с лошадью через обычную трансформацию?

[kulaeff]

Такого эффекта не добиться с помощью CSS трансформаций. Ибо сколько трансформаций к картинке не применяй, она все равно останется плоской. Очевидно, что там используется webgl. Причем такого эффекта, как на слайде с кратером можно добиться просто применив к картинке карту высот, таким образом она получается выпуклая. И то, вряд ли можно такой техникой добиться идеального результата. С облаками и лошадью, скорее всего, такой трюк уже не прокатит, слишком уж похоже на настоящий 3d объект, но вряд ли таковым является.

[xmoonlight]

Max_Borisov, Лошадь там действительно в 3D, но это не сильно заметно.

[Max_Borisov]

xmoonlight, я как не пытался, эффекта как на слайде с кратером, через обычную трансформацию добиться не получилось

[xmoonlight]

Max_Borisov, Псевдо-3D - это не так просто... Это с опытом приходит.
Нужно понимать угол обзора, фокус и искажение перспективы, расстояния между плоскостями, расстояния объектов до камеры и т.д.