Як повернути елемент сторінки сайту

Я зарание приготував зображення (ширина 400px) з адресами:
images / photo_1.jpg
images / photo_2.jpg
images / photo_3.jpg
images / photo_4.jpg

Надалі ми будемо привласнювати зображень ідентифікатори (Id) відповідно до їх іменами.

Зверніть увагу, ми присвоїли блоку ідентифікатор - id = "photo_page". За ідентифікатором зможемо звернеться до блоку за допомогою css.

Зазначений перелік стилів необхідно розмістити таким чином:

#photo_page {
position: relative-
margin: 0 auto-
width: 900px;
height: 650px;
text-align: center-
}

Зверніть увагу на використання "#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 до лівого краю.

-webkit-transform: rotate (значення) -
-moz-transform: rotate (значення) -
-o-transform: rotate (значення);

Це стиль повороту для браузерів: Google Chrome, Mazilla, Opera (відповідно). Замість слова "значення"Ми будемо вставляти число з приставкою deg в кінці, ось так:

90deg - поворот на 90 градусів за годинниковою стрілкою.
-5deg - поворот на -5 градусів проти годинникової стрілки.
І так далі.

# Photo_1 {
-webkit-transform: rotate (5deg) -
-moz-transform: rotate (5deg) -
-o-transform: rotate (5deg) -
}

Перше зображення повернуто на 5 градусів.

# Photo_2 {
-webkit-transform: rotate (-3deg) -
-moz-transform: rotate (-3deg) -
-o-transform: rotate (-3deg) -
}

Відео - "Як в Word повернути тільки одну сторінку"

Друге зображення повернуто на -3 градуси.

# Photo_3 {
-webkit-transform: rotate (-2deg) -
-moz-transform: rotate (-2deg) -
-o-transform: rotate (-2deg) -
}

Відео - "Як ПЕРЕВЕРНУТИ PDF файл і зберегти його / rotate pdf document and save"

Третє зображення повернуто на -2 градуси.

# Photo_4 {
-webkit-transform: rotate (8deg) -
-moz-transform: rotate (8deg) -
-o-transform: rotate (8deg) -
}

Четверте зображення повернуто на 8 градусів.

# Photo_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: rotate (5deg) -
-moz-transform: rotate (5deg) -
-o-transform: rotate (5deg) -
}

Зверніть увагу, перше значення стилю - відступ зверху- друге - відступ справа- третє - відступ знизу- четверте - відступ зліва.
важливо: в нашому випадку відступ знизу дорівнює від`ємного значення відступу зверху. Якщо ж на вашій сторінці утворюється порожній простір під зображенням, спробуйте зробити відступ знизу від нього ще більш негативним.

Дописуйте стиль відступу для будь-яких зображень, положення яких вас не влаштовує.