Вращаемая карточка средствами CSS и Webkit анимацией

Webkit подарил нам огромный набор инструментов, которые эффективнейшим образом можно использовать для улучшения пользовательских интерфейсов. Теперь, когда у нас есть возможность преобразовывать элементы и пользоваться переходами, «серые» странички превратятся во что-то свежее и неотразимое.

В этом уроке мы покажем, как использовать две перечисленные техники для того, чтобы создать карту продукта, которую можно вертеть в разные стороны. На обратной стороне будет показана подробная информация о продукте.

Демо

Вашему вниманию я представил 3 примера:

Демо 1

Демо 2

Демо 3

Что насчёт Firefox, Opera и ещё одного браузера, который всех уже достал?

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

Структура HTML

Для того чтобы не усложнять ситуацию, я приведу код только нужного нам элемента. Как видите, тут всё просто: блок, в который помещено два блока. Один для лицевой стороны, другой - для обратной.

<div id="block" class="block" onclick="changeClass()">
    <div class="front side">
        <img src="/image.jpg" alt=""/>
    </div>
    <div class="back side">
        <p>Some text</p>
    </div>
</div>

Заметьте, что всякий раз, когда происходит клик по карте, срабатывает функция changeClass. Это триггер для первого примера. Третий пример использует функцию changeClass, которая прикреплена к кнопке. Во втором примере зеркальное отражение карты просто управляется средствами CSS и не вызывает никакую функцию: тут мы используем псевдо селектор :hover.

JavaScript

Для первого и третьего примера функция changeClass просто добавляет или удаляет класс, в зависимости от текущих классов. Доступ осуществляется по ID.

function changeClass(){
    if(document.getElementById("block").className == "block"){
        document.getElementById("block").className += " rotated";
    }
    else{
        document.getElementById("block").className = "block";
    }
}

Оформляем обратную сторону

И в этот раз привожу только то, что считаю нужным для этого примера:

#container{
    height: 360px;
    width: 620px;
    position: relative;
    -webkit-perspective: 500;
}
.block {
    position: absolute;
    height: 260px;
    width: 320px;
    left: 50px;
    top: 50px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1.5s;
}
.rotated{
    -webkit-transform: rotateY(180deg);
}
.side{
    position: absolute;
    -webkit-backface-visibility: hidden;
    -webkit-box-shadow: 0 2px 5px #666;
}
.front{
    height: 260px;
    width: 320px;
}
.back{
    height: 280px;
    width: 180px;
    padding: 10px;
    -webkit-transform: rotateY(180deg);
}

Свойства Webkit, которые мы использовали в этом примере:

-webkit-perspective: позволяет поместить элемент в 3D пространстве. Иначе противоположная сторона будет похожа на горизонтальный фрагмент. Используется только в перечисленных целях.

-webkit-transform-style: позволяет производить различные операции над элементом, который находится в 3D пространстве. Это свойство больше всего необходимо, если вы хотите создать что-то наподобие третьего примера.

-webkit-transition: позволяет использовать анимацию для получения обратной стороны карты. Классно? Ещё бы! Другим способом у нас просто не получится переключиться между передней и задней сторонами краты.

-webkit-transform: элементарное свойство, предназначенное для вращения карты.

-webkit-backface-visibility: это свойство скроет заднюю сторону, когда перед нами передняя сторона, и переднюю сторону, когда перед нами задняя сторона. В этом примере без этого просто никак.

Где это можно использовать?

Хорошо. Благодаря этому уроку, мы теперь знаем, как создать обратную сторону карты, используя свойства Webkit. Но где мы можем использовать подобный пример? Например, если у вас есть приложение с большим количеством сгруппированных кнопок, вместо того, чтобы показать 16 кнопок одновременно, вы могли бы объединить их в 4 блока: когда пользователь будет прокручивает мышью по одному из наборов, сами знаете, что произойдёт.

Также подобную функциональность можно прикрепить к пользовательским аватарам, при клике на которые будет открываться подробная информация о пользователе.

Вот и всё. Удачи!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/u3NZS5tzCAk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Вращаемая карточка средствами CSS и Webkit анимацией | | 2012-06-19 12:05:53 | | Статьи Web-мастеру | | Webkit подарил нам огромный набор инструментов, которые эффективнейшим образом можно использовать для улучшения пользовательских интерфейсов. Теперь, когда у нас есть возможность преобразовывать | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: