Поворот элемента с помощью CSS



Вы хотите разместить на странице веер из фото, разбросанные листья или еще что-то? Все это можно сделать, если применить несколько стилей CSS.


1. Используем изображения шириной 400px.

2. Для фотоальбома создадим блок при помощи тэга div и индефикатора id="photo_albom". Каждое изображение должно иметь собственный тэг div с использованием тэга img и индефикатора id в соответствии с их именами , вот так:

<div id="photo_albom"> <div><img src="../povorot/1.jpg" id="photo_1" /></div> <div><img src="../povorot/2.jpg" id="photo_2" /></div> <div><img src="../povorot/3.jpg" id="photo_3" /></div> <div><img src="../povorot/4.jpg" id="photo_4" /></div> </div>

3. Зададим нашим блокам стили css.

#photo_albom { position: relative;/*начало координат от левого верхнего угла нашего блока*/ margin: 50px auto;/*отступ блока "50px" сверху и снизу, автоматический отступ справа и слева*/ width: 900px;/*ширина блока*/ height: 650px;/*высота блока*/ text-align: center;/*текст по центру*/ } #photo_albom img{ border-radius: 7px;/*скругленные углы*/ border: 1px solid grey;/*серая рамка*/ background: #ffffff;/*белый фон*/ padding: 10px;/*внутренние отступы*/ box-shadow: 2px 2px 10px #697898;/*тень*/ } #photo_albom div { float: left;/*прижимает все блоки к левому краю.*/ }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

4. Любой поворот элемента задается с помощью свойства CSS transform. С его помощью можно применять ко всем элементам веб страниц самые разнообразные эффекты: вращение, перемещение, масштабирование и другие эффекты трансформации http://htmlbook.ru/css/transform.

Для каждого браузера это свойство используется с приставкой:

-moz-transform: rotate(значение); /* Для Firefox */ -ms-transform: rotate(значение); /* Для IE */ -webkit-transform: rotate(значение); /* Для Safari, Chrome, iOS */ -o-transform: rotate(значение); /* Для Opera */

5. Зададим стили для наших фото.

#photo_1{ -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); } #photo_2 { -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); } #photo_3 { -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -o-transform: rotate(-2deg); } #photo_4 { -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); -webkit-transform: rotate(8deg); -o-transform: rotate(8deg); }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

5. Корректировать положение изображений можно с помощью свойства margin . На пример, вы хотите сместить первое изображение на 25px от верхнего края и на 15px от левого края. В этом случае мы должны записать:

#photo_1 { margin: 25px -15px -25px 15px;/*отступ - сверху; справа; снизу; слева.*/ -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); }

10.10.2013