Правая сторона должна зеркальна левой. Поэтому мы ее сначала повернем на 15 градусов против часовой стрелки. Ее мы тоже исказим на 15 градусов, но только в другом направлении. Что бы поставить сторону на место, опусти ее на вниз на всю ее высоту....
У index.html файле есть две кнопки: #left и #right. При нажатии на кнопку #left элемент .box должен поворачиваться на 30 градусов против часовой стрелке. При нажатии на кнопку #right элемент ....
Построим полноценный 3D куб. Не изменяй уже добавленные стили, все новые стили добавляй только к уже существующим классам. Первым делом повернем на нужный угол все необходимые стороны. Сторона с классом back должна быть развернута на 180 градусов вокруг оси Y....
После того, как стороны повернуты, мы видим только переднюю часть куба. Ну и заднюю, благодаря прозрачности фона. Что бы все стороны стали видны нам нужно добавить перспективу с глубиной 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. Начальное положение уже указано. По истечение четверти времени круг должен переместится в верхний правый угол. Через такое же время потом он должен оказаться в нижнем правом углу....