Как повернуть элемент страницы сайта?

Очень простой способ поворачивания элементов страницы сайта - достаточно будет применить всего лишь несколько стилей css. Ознакомление с данным уроком позволит разместить на странице развернутый карточный веер, разбросанные опавшие листья или стильные фотографии в альбоме. В уроке размещен пример реализации фотоальбома и учтено решение для всех современных браузеров.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• Четыре фотографии шириной до 450px;

Инструкция

Данный пример будет посвящен созданию страницы стильного альбома с повернутыми фотографиями.

Я зарание приготовил изображения (ширина 400px) с адресами:

images/photo_1.jpg

images/photo_2.jpg

images/photo_3.jpg

images/photo_4.jpg

В дальнейшем мы будем присваивать изображениям идентификаторы (id) в соответствии с их именами.

Для начала мы подготовим блок для нашего фотоальбома при помощи тэга div, а также внесем в него фотографии при помощи тэга img (каждое изображение должно быть заключено в собственный тэг div), вот так:



Обратите внимание, мы присвоили блоку идентификатор - id="photo_page". По идентификатору сможем обратится к блоку при помощи css.

Далее потребуется задать блоку стили css. Перечень стилей: "position: relative;" - задаст начало координат от левого верхнего угла нашего блока; "margin: 50px auto;" - задаст отступ нашего блока "50px" сверху и снизу от остального содержания страницы, а так же задаст автоматический отступ справа и слева, выровняв таким образом наш блок по центру; "width: 900px; height: 650px;" - задаст ширину 900px и высоту 650px, соответственно.Указанный перечень стилей необходимо разместить таким образом:#photo_page {position: relative;margin: 0 auto;width: 900px;height: 650px;text-align: center;}Обратите внимание на использование "#photo_page" - так мы обратились к идентификатору блока.

Теперь мы присвоим общие стили для каждого изображения внутри блока photo_page. Это скругленные углы, серая рамка, белый фон, внутренние отступы и тень.

Таким образом будет создан эффект фотографии:#photo_page img{border-radius: 7px;border: 1px solid grey;background: #ffffff;padding: 10px;box-shadow: 2px 2px 10px #697898;}Обратите внимание на использование "#photo_page img" - так мы обратимся ко всем изображениям внутри блока photo_page

Также важно дописать такой короткий стиль:#photo_page div {float: left;}Он прижимает все блоки внутри блока photo_page к левому краю.

Сейчас выполнен промежуточный этап урока. Если ваша работа схожа с изображением на скриншоте, значит, вы не допустили ошибки и можете приступать к следующему шагу.

Теперь переходим к повороту размещенных фото. Для этого нам понадобится стиль transform. На данный момент в чистом виде он не используется, а только с приставкой для каждого браузера в начале, вот так:-webkit-transform: rotate(значение);-moz-transform: rotate(значение);-o-transform: rotate(значение);Это стиль поворота для браузеров: Google Chrome, Mazilla, Opera (соответственно). Вместо слова "значение" мы будем вставлять число с приставкой deg в конце, вот так:90deg - поворот на 90 градусов по часовой стрелке.-5deg - поворот на -5 градусов против часовой стрелки.И так далее.

Стиль для фотографии photo_1:#photo_1 {-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);}Первое изображение повернуто на 5 градусов.

Стиль для фотографии photo_2:#photo_2 {-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);}Второе изображение повернуто на -3 градуса.

Стиль для фотографии photo_3:#photo_3 {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}Третье изображение повернуто на -2 градуса.

Стиль для фотографии photo_4:#photo_4 {-webkit-transform: rotate(8deg);-moz-transform: rotate(8deg);-o-transform: rotate(8deg);}Четвертое изображение повернуто на 8 градусов.

Рассмотрим, как можно корректировать положение изображений. К примеру, вы хотите сместить первое изображение на 20px от верхнего края и на 10px от левого края. В таком случае, необходимо воспользоваться стилем margin. Вот правильный вариант его использования для нашего случая:#photo_1 {

margin: 20px -10px -20px 10px;-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);}Обратите внимание, первое значение стиля - отступ сверху; второе - отступ справа; третье - отступ снизу; четвертое - отступ слева.

Важно: в нашем случае отступ снизу равен отрицательному значению отступа сверху. Если же на вашей странице образуется пустое пространство под изображением, попробуйте сделать отступ снизу от него еще более отрицательным.

Работа завершена, я привожу скриншот (с учетом изменения отступа первого изображения, описанного в Шаге 12).Дописывайте стиль отступа для любых изображений, положение которых вас не устраивает.

Оцените статью!