Добавим код для переворачивающегося блока в 3d формате, первый блок в, котором будет анимация t3d, внутри блок с классом rotate, он и будет переворачиваться.
У этого блока две стороны на первом плане будет изображение img на другой стороне текст txt, с дополнительным классом pd для отступов текста от краев блока.
Внутри заголовок второго уровня и текст.
Код в index.html.
1 2 3 4 5 6 7 8 9 10 11 |
<div class="t3d"> <div class="rotate"> <img src="img/ship.jpg" alt="Корабль"> <div class="txt"> <div class="pd"> <h2>Корабль</h2> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </div> </div> </div> </div> |
Содержание статьи
Установим стили к 3d секции.
- Задаем размеры ширины width: 200px и высоты height: 300px для основного блока t3d. Добавим отступ сверху и посередине сбоку свойством margin: 50px auto. Чтобы потом переворот страниц был не плоским, а немного увеличивался при перевороте, укажем перспективу perspective: 800px.
- У переворачивающегося блока rotate сделаем position: relative, чтобы внутри него размещать элементы. Включим функцию 3д transform-style: preserve-3d. Чтобы переворот страниц был плавным, установим transition: 1s.
- У txt будет абсолютное позиционирование. Перевернем назад текст transform: rotateY (180deg), чтобы вначале видеть картинку.
- Для класса pd добавим внешний отступ padding: 20px, размер шрифта, цвет. Чтобы сделать 3d текст как в примере воспользуемся генераторами 3d текста в интернете, в поисковике прописываем generator 3d css text.
- У двух сторон картинки img и текста txt будут одинаковые свойства размеров и бордюра border: 3px solid #b641b0.
- Для картинки img, когда текст перевернется, он не будет отображаться при помощи свойства backface-visibility: hidden
Рассмотрим когда наводим мышку &:hover на блок t3d, то наш блок rotate будет переворачиваться transform: rotateY (180deg).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.t3d &:hover .rotate transform: rotateY(180deg) .t3d width: 200px height: 300px margin: 50px auto perspective: 800px .rotate position: relative transition: 1s transform-style: preserve-3d .txt position: absolute top: 0 left: 0 transform: rotateY(180deg) .pd padding: 20px font-weight: bold font-family: Tahoma, sans-serif line-height: 2em color: #b641b0 font-weight:bold font-size: 1em text-shadow: 0px 0px 0 rgb(227,227,227), 1px -1px 0 rgb(213,213,213),2px -2px 0 rgb(200,200,200),3px -3px 0 rgb(187,187,187),4px -4px 0 rgb(173,173,173),5px -5px 0 rgb(160,160,160),6px -6px 0 rgb(147,147,147),7px -7px 0 rgb(133,133,133),8px -8px 0 rgb(120,120,120), 9px -9px 0 rgb(107,107,107),10px -10px 9px rgba(0,0,0,0.55),10px -10px 1px rgba(0,0,0,0.5),0px 0px 9px rgba(0,0,0,.2) h2 font-size: 1.2em font-weight: bold img, .txt border: 3px solid #b641b0 width: 200px height: 300px background-color: #с3с3с3 backface-visibility: hidden |
Сделаем 3d куб.
Добавим секцию с идентификатором id=wrapper, внутри будет 3d куб cube с шестью сторонами side1,2,3,4,5,6.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section id="wrapper"> <div class="container"> <div class="row"> <div id="cube"> <div class="side" id="side1">1</div> <div class="side" id="side2">2</div> <div class="side" id="side3">3</div> <div class="side" id="side4">4</div> <div class="side" id="side5">5</div> <div class="side" id="side6">6</div> </div> </div> </div> </section> |
Стили к 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 куба.
- Первая лицевая сторона side будет на своем месте.
- transform: rotateY (90deg) Для второй стороны куба. Левая сторона.
- transform: rotateY (-90deg) по оси y поворачиваем правую сторону.
- transform: rotateX (90deg) верхняя сторона по оси x.
- transform: rotateX (-90deg) нижняя сторона по оси x.
- transform: rotateY (180deg) Заднюю сторону поворачиваем на 180 градусов.
Попробуем поменять положения куба свойством transform:rotate3d (1,1,1,45deg) у #cube, но можно сделать скрипт изменения положения 3d куба в пространстве по наведению мышки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
#wrapper perspective: 900px #cube position: relative width: 300px height: 300px margin: 100px auto transform-style: preserve-3d transform-origin: 50% 50% -150px .side width: 300px height: 300px margin-top: 50px background-color: rgba(0,0,0,.3) background: radial-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)) position: absolute border: 3px solid #b641b0 border-radius: 10px font-size: 4em color: blue line-height: 300px text-align: center text-shadow: 0 3px 3px blue transform-origin: 50% 50% -150px backface-visibility: hidden #side2 transform: rotateY(90deg) #side3 transform: rotateY(-90deg) #side4 transform: rotateX(90deg) #side5 transform: rotateX(-90deg) #side6 transform: rotateY(180deg) |
Пишем javascript для 3d куба.
Используем обработчик события mousemove с функцией, которая будет принимать объекты, чтобы извлекать потом координаты курсора относительно страницы.
Когда мышка движется, мы меняем стили css у элемента с идентификатором #cube, а именно свойство transform.
- По оси rotateX мы ставим e.pageY градусов.
- По оси rotateY ставим e.pageX градусов.
Теперь проверяем как это работает в браузере.
1 2 3 4 5 6 7 |
$(function() { $(document).mousemove(function(e){ $('#cube').css({ 'transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)' }); }); }); |