Складывающаяся 3D анимация на CSS
Google Plus является источником вдохновения многих разработчиков, особенно в сфере использования CSS и JavaScript. В данном уроке воспроизводится эффект сворачивания карты. Для него используются 3D анимации, которые придают шарм визуализации, и не требуется ни строчки кода JavaScript.
Разметка HTML
Для воспроизведения эффекта потребуется серия элементов:
<div id="container"> <div class="parent1"> <div class="parent2"> <div class="parent3"> <!-- Содержание располагается здесь --> </div> </div> </div> </div>
Первый элемент "parent" определяет состояние 3D, второе - видимое в процессе анимации содержание, а третий - содержание разворачиваемого блока.
CSS
Код CSS для создания данного эффекта значительно проще, чем может показаться на первый взгляд:
/* Статичное состояние */
#container {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #ccc;
background: url(GoogleTestDW.png) 0 0 no-repeat;
}
.parent1 {
/* Общий контейнер */
height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: .5s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property:height;
-moz-transition-duration: .5s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property:height;
-o-transition-duration: .5s;
-o-perspective: 1000px;
-o-transform-style: preserve-3d;
transition-property: height;
transition-duration: .5s;
perspective: 1000px;
transform-style: preserve-3d;
}
.parent2 {
/* Содержание, выводимое в процессе анимации */
}
.parent3 {
/* Анимированный, "складывающийся" блок */
height: 56px;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: .5s;
transform: rotateX(-90deg);
transform-origin: top;
}
/* Состояние hover для включения анимаций */
#container:hover .parent1 { height: 111px; }
#container:hover .parent3 {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 111px;
}
Статичное состояние элемента parent1 определяет 3D трансформацию и состояния перспективы, начиная с высоты 0px. Статичное состояние элемента parent3 устанавливает переход и трансформацию вращения. При наведении курсора высота элементов parent1 и parent3 анимируется до конечных значений (в нашем случае 111px), и они поворачиваются до 0 градусов.
Лучше всего таким образом выводит дополнительные изображения, так как на них лучше заметны изменения перспективы.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/s2NI2cU2RDw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба. (Дейл Карнеги / БИЗНЕС) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.