CoderslangJS

После того, как стороны повернуты, мы видим только переднюю часть куба. Ну и заднюю, благодаря прозрачности фона. Что бы все стороны стали видны нам нужно добавить перспективу с глубиной 400px....

Повернем немного наш куб, что бы надписи не сливались. Куб будем поворачивать вокруг оси X на -5 градусов. Не забывай, что все остальные элементы, который мы трансформировали, должны оставаться в своем 3D пространстве....

Давай напишем скрипт и трансформации, которые будут открывать окно. При нажатии на кнопку элементам с классом .blind нужно добавить класс .opened. При добавлении класса .opened, ставни (.blind) должны поворачиваться на 15 градусов и сдвигаться на 100px вдоль оси X....

При наведении на любой элемент списка шоу Netflix должен происходить переход: значение свойства margin-left должно стать -300px; значение свойства font-size должно стать 32px. Длительность перехода - 1s, функция времени - ease-in-out....

Потренируемся с переходами значений css свойств. Для элемента div.box при наведение должны происходить следующие изменения: ширина должна стать 400px, задержка перехода 1s, длительность - 4s; высота должна стать 400px, задержка перехода 2s, длительность - 4s; углы должны стать скруглены на 50%, задержка перехода 2s, длительность - 4s; цвет заднего фона должен стать #861657, задержка перехода не должно быть, длительность - 4s....

Добавим простую анимацию. В ней круг должен бесконечно двигаться по углам квадрата. Сделаем небольшую подготовку перед анимацией. Один цикл анимации элемента div.circle должен длится 8 секунд. Повторятся же анимация должна постоянно....

Теперь опишем нашу анимацию circleMove в keyframe. Начальное положение уже указано. По истечение четверти времени круг должен переместится в верхний правый угол. Через такое же время потом он должен оказаться в нижнем правом углу....

Сделаем анимацию переворачивания карточки На первом шаге проведем некоторую подготовку. Во-первых, задняя часть карты (.face.back) должна быть развернута на 180 градусов вокруг оси Y Во-вторых, у каждой стороны (.back и ....

Переворот карточки у нас будет с хитростью. Если мы ее просто повернем, то она будет немного как бы вылазить наперед. Что бы это избежать, надо у элемента card сместить центр перспективы вправо....

Ты наверняка смотрел фильмы Star Wars. Помнишь, в начале каждого фильма идут титры с предысторией? Сейчас попробуем сделать такую анимацию для первого эпизода. Первым делом подготовим разметку нашей страницы. Внутри body добавим div с классом star-wars, внутри него - один div с классом episode-intro....