Складывающаяся 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-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.