Сделаем 3d эффект переворота изображения и куб на css

Добавим код для переворачивающегося блока в 3d формате, первый блок в, котором будет анимация t3d, внутри блок с классом rotate, он и будет переворачиваться.

У этого блока две стороны на первом плане будет изображение img на другой стороне текст txt, с дополнительным классом pd для отступов текста от краев блока.

Внутри заголовок второго уровня и текст.

Код в index.html.

Установим стили к 3d секции.

1. Задаем размеры ширины width: 200px и высоты height: 300px для основного блока t3d. Добавим отступ сверху и посередине сбоку свойством margin: 50px auto. Чтобы потом переворот страниц был не плоским, а немного увеличивался при перевороте, укажем перспективу perspective: 800px.
2. У переворачивающегося блока rotate сделаем position: relative, чтобы внутри него размещать элементы. Включим функцию 3д transform-style: preserve-3d. Чтобы переворот страниц был плавным, установим transition: 1s.
3. У txt будет абсолютное позиционирование. Перевернем назад текст transform: rotateY (180deg), чтобы вначале видеть картинку.
4. Для класса pd добавим внешний отступ padding: 20px, размер шрифта, цвет. Чтобы сделать 3d текст как в примере воспользуемся генераторами 3d текста в интернете, в поисковике прописываем generator 3d css text.
5. У двух сторон картинки img и текста txt будут одинаковые свойства размеров и бордюра border: 3px solid #b641b0.
6. Для картинки img, когда текст перевернется, он не будет отображаться при помощи свойства backface-visibility: hidden

Рассмотрим когда наводим мышку &:hover на блок t3d, то наш блок rotate будет переворачиваться transform: rotateY (180deg).

Сделаем 3d куб.

Добавим секцию с идентификатором id=wrapper, внутри будет 3d куб cube с шестью сторонами side1,2,3,4,5,6.

Стили к 3d элементу.

• У основного элемента wrapper будет perspective: 900px.
• #cube установим относительное позиционирование куба position: relative. Высота и ширина будет 300 пикселей. Чтобы увидеть все стороны куба добавим свойство transform-style: preserve-3d.
• У каждой стороны side установим ширину и высоту плюс фон черный полупрозрачный background-color: rgba (0,0,0,.3). Все шесть сторон сложим стопкой position: absolute. Зададим грани куба фиолетового цвета и наложим на фон градиент background: radial-gradient (rgba (0,0,0,.1),rgba (0,0,0,.5)). Цифры на сторонах будут синие color: blue с тенью.

Соберем все стороны куба с помощью css трансформации.

Для начала ищем центр куба transform-origin: 50% 50% -150px и добавим к классу side и идентификатору #cube, чтобы потом смогли вращать куб движением мышки.

Поворачиваем каждую сторону 3d куба.

1. Первая лицевая сторона side будет на своем месте.
2. transform: rotateY (90deg) Для второй стороны куба. Левая сторона.
3. transform: rotateY (-90deg) по оси y поворачиваем правую сторону.
4. transform: rotateX (90deg) верхняя сторона по оси x.
5. transform: rotateX (-90deg) нижняя сторона по оси x.
6. transform: rotateY (180deg) Заднюю сторону поворачиваем на 180 градусов.

Попробуем поменять положения куба свойством transform:rotate3d (1,1,1,45deg) у #cube, но можно сделать скрипт изменения положения 3d куба в пространстве по наведению мышки.

Пишем javascript для 3d куба.

Используем обработчик события mousemove с функцией, которая будет принимать объекты, чтобы извлекать потом координаты курсора относительно страницы.

Когда мышка движется, мы меняем стили css у элемента с идентификатором #cube, а именно свойство transform.

• По оси rotateX мы ставим e.pageY градусов.
• По оси rotateY ставим e.pageX градусов.

Теперь проверяем как это работает в браузере.