Яндекс Метрика
3D карточка с перспективой HTML, CSS, JS. Готовый код для сайта.

3D карточка с перспективой HTML, CSS, JS.

3D карточка с перспективой HTML, CSS, JS.

3D карточка с перспективой HTML, CSS, JS.

Невероятно красивая перспектива, построенная на JS с обработчиком событий «mousemove». Пример, код и описание. Забирайте код и используйте в своих проектах.

kvasov.site
html css js

Карточка (картинка) с перспективой при использовании Jquery.

В итоге, получаем очень красивую карточку или фотку, перспектива которой меняется при движении мыши

Карточка создается стандартным html текстом и стандартной таблицей стилей, но с подключением дополнительной библиотеки jquery, которую можно скачать по ссылке ниже:


HTML текст для создания самой карточки:

Если с гипертекстом всё понятно, здесь просто набор блочных элементов с классами под стили. То с самими стилями немного сложнее, но тоже по силам каждому разобраться.


CSS стили для создания карточки и теней вокруг неё:

На что обратить внимание. transform-style: preserve-3d определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно обязательно использоваться совместно с transform. При указании preserve-3d дочерние элементы будут отображаться в 3D плоскости.


JavaScript, как основной двигатель графики.

Скрипт достаточно короткий и в комментариях к нему всё в принципе описано. Главное, не забываем подключить нужную библиотеку jquery.