Магия CSS #6 — 3D трансформация при наведении на карточку

preview_player
Показать описание

Магия CSS. Разберем, как создается 3D трансформация для объектов при наведении, используя transform со значениями rotate и skew, а также узнаем, для чего используют свойство perspective в CSS.

Примеры из видео:

__
__
__
  1. Анна Блок
  2. css
  3. frontend
  4. css transform
  5. transform skew css
  6. transform rotate css
Рекомендации по теме
Магия CSS #6 0:14:11

Магия CSS #6 — 3D трансформация при наведении на карточку

удаление неизвестного объекта 0:00:29

удаление неизвестного объекта

Магия CSS #10➤ 0:04:22

Магия CSS #10➤ Стиль анимация текста пишущей машинки на CSS...

3D-transform на примере 0:07:45

3D-transform на примере переворота блока

3D Flip Card 0:06:47

3D Flip Card Animation using HTML & CSS

Как выглядит 70 0:00:24

Как выглядит 70 кг сухой мышечной массы в футболке и без неё....

Магия CSS #13 0:05:11

Магия CSS #13 ➤ Эффект сияющего текста на #HTML и #CSS

Магия CSS #9➤ 0:11:02

Магия CSS #9➤ Эффект появление текста на картинке при наведении | CSS, HTML ( Версия 3.0)...

CSS 3D Трансформации 0:08:27

CSS 3D Трансформации при наведении

CSS - Making 0:01:06

CSS - Making a 3D sphere with shading.

Создаем объемный 3D-текст 0:05:50

Создаем объемный 3D-текст при помощи CSS

CSS 3D Flip 0:07:22

CSS 3D Flip Card | CSS Hover Effects

Эффект 3D-меню при 0:11:15

Эффект 3D-меню при помощи CSS

Магия CSS #7 0:14:19

Магия CSS #7 — Презентация Apple 2019 и крутая анимация для сайта...

3D Loading Animation 0:08:14

3D Loading Animation | CSS 3D Effect

береги свой пирсинг, 0:00:42

береги свой пирсинг, брат

Магия CSS #8➤Эффект 0:09:48

Магия CSS #8➤Эффект появление текста на картинке при наведении | CSS, HTML (Версия 2.0)...

136 - Css 0:23:03

136 - Css 3d Transforms (3)

Css 3D Animation 0:02:19

Css 3D Animation

Как сделать 3D 1:08:08

Как сделать 3D карточку с анимацией с использованием CSS переменных и JavaScript...

3D эффект при 0:15:00

3D эффект при наведении на картинку | Чистый CSS

CSS фича #7 0:05:01

CSS фича #7 | Анимация изображений - 3D дорога

Магия CSS #12 0:04:03

Магия CSS #12 ➤ #CSS эффект при наведении на ссылку

Kuplinov проходит Atomic 0:00:30

Kuplinov проходит Atomic Heart #kuplinovplay #kuplinov #atomicheart #куплинов #shorts #youtubeshorts...

Комментарии
Автор

Интересно, лайк! Побольше бы таких туториалов!

zdee
Автор

Здравствуйте, наткнулась на очень интересную вещь. Делала карточки. Суть такова, что при наведении курсором, карточка поворачивается на 180градусов и сзади написан текст. Проблема в том, что карточки не работают в Safari на iOS. В мобильной версии тоже. Карточка будто уже произвела анимацию, да еще и шрифт отзеркалила. Я добавила всем transform и transition префикс -webkit, но это не сработало. Так же использовала transform: translateY(-480px) perspective(600px) rotateY(180deg); Почему вообще так происходит в Safari?

piterpaper
Автор

Посоветуйте книгу или ресурс, где можно научиться понимать и делать подобные штуки, если я знаю основы css 3. Заранее спасибо)

disposables
Автор

Сними, пожалуйста, видос про анимацию в JS. Там вроде библиотек wow.js, это все, что я знаю, думаю для многих актуально

eldarda
Автор

Покажи плз как сделать, чтобы при наведении на один блок, другой блок увеличивался бы в размерах

sergey_zatsepin
Автор

А есть у вас видео с красивой и необычной анимацией

Fs-xjgu