Доброго времени суток, уважаемые читатели! Сегодня я хочу рассказать Вам о том, как за несколько минут при помощи CSS3 создать такую вот красоту:
В чём вся красота вы поймёте попозже.
ШАГ 1: Основной HTML
Приступим к работе и начнём с написание основного HTML кода. В один блочный елемент (с id=«ph») мы поместим четыре блока с одинаковым классом но разными идентификаторами, и в каждом из этих блоков будет своя фотограффия. Код будет віглядеть так:
<div id="ph">
<div class="photo" id="photo1">
<img src="photo2.jpg" />
</div>
<div class="photo" id="photo2">
<img src="photo3.jpg" />
</div>
<div class="photo" id="photo3">
<img src="photo6.jpg" />
</div>
<div class="photo" id="photo4">
<img src="photo7.jpg" />
</div>
</div>
ШАГ 2: Основные стили
Для нашей странички и блока #ph мы пропишем такие стили:
body {
background-repeat: none;
background: #111013 url(image1.jpg) no-repeat top center;
margin: 0;
min-width: 1000px;
}
#ph {
text-align: center;
padding: 75px;
margin-top: 50px;
}
Все выше указанные стили написаны лишь для красоты.
ШАГ 3: Логика работы
Логика работы даного велосипеда заключается вот в чём:
- По умолчанию каждый блок с картинкой развёрнут на какой-то (рандомный) угол;
- При наведении на блок картинка увеличивается и поворачивается на ноль градусов;
ШАГ 4: Стилизируем блоки и картинки
Каждый блок с картинкой мы делаем инлайн-блоком и задаём относительное позиционирование, чтобы потом можно было его двигать:
.photo {
display:inline-block;
position:relative;
}
Для картинки внутри мы просто задаём ширину в 130 пикселей:
.photo img {
width: 130px;
}
Каждый блок с картинкой мы поворачиваем на рандомный угол:
#photo1 {
transform: rotate(-20deg);
}
#photo2 {
transform: rotate(10deg);
}
#photo3 {
transform: rotate(35deg);
}
#photo4 {
transform: rotate(-15deg);
}
ШАГ 5: Анимируем картинки
При наведении на блок картинка должна увеличиваться и помещаться поверх все остальных. Отступы добавлены для того, чтобы при этом остальные блоки не «ездили».
.photo:hover img{
width: 250px;
margin: -80px -60px;
z-index: 1000;
}
ШАГ 6: Вопрос кроссбраузерности
Свойства transition и transform относятся к свойствам CSS третьего уровня. Большинство браузер не поддерживают этих нативных свойств, а имеюь свои аналоги с приставками типа -webkit- или -moz-. Для разных браузеров свои префиксы:
- -webkit- для браузеров на движке Webkit (Chrome, Safari);
- -moz- для браузеров на движке Gecko (Firefox, SeaMonkey);
- -ms- для браузера Internet Explorer;
- -o- для браузеров на движке Presto (Opera, Nintendo DS Browser);
Чтобы наш велосипед работал в разных браузерах нужно добавить эти префиксы в наш код. Рассмотрим пример для .photo и #photo1:
.photo {
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
-moz-transition: all 0.5s;
-moz-transition-delay: 0.1s;
-ms-transition: all 0.5s;
-ms-transition-delay: 0.1s;
-o-transition: all 0.5s;
-o-transition-delay: 0.1s;
transition: all 0.5s;
transition-delay: 0.1s;
}
#photo1 {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Что у нас получилось?
Результат радует глаза (по крайней мере мои). Посмотреть его вы можете здесь.
Не судите строго, это лишь урок для начинающих разработчиков.
Автор: makzimko