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 для создания данного эффекта значительно проще, чем может показаться на первый взгляд:

<span style="font-family: monospace;">      /* Статичное состояние */
        #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;
        }
</span>

Статичное состояние элемента parent1 определяет 3D трансформацию и состояния перспективы, начиная с высоты 0px. Статичное состояние элемента parent3 устанавливает переход и трансформацию вращения. При наведении курсора высота элементов parent1 и parent3 анимируется до конечных значений (в нашем случае 111px), и они поворачиваются до 0 градусов.

Лучше всего таким образом выводит дополнительные изображения, так как на них лучше заметны изменения перспективы.

Добавлено: 01 Мая 2018 14:19:07 Добавил: Андрей Ковальчук Нравится 0

Добавить