A very simple way to rotate the elements of a site page - it will be enough to apply just a few css styles. Familiarization with this lesson will allow you to place an unfolded card fan, scattered fallen leaves or stylish photos in an album on the page. The lesson contains an example of the implementation of a photo album and takes into account the solution for all modern browsers.
It is necessary
Four photos up to 450px wide
Instructions
Step 1
This example will focus on creating a stylish album page with rotated photos.
I prepared in advance images (width 400px) with addresses:
In the future, we will assign IDs to images according to their names.
Step 2
First, we will prepare a block for our photo album using the div tag, and also add photos to it using the img tag (each image must be enclosed in its own div tag), like this:
Please note that we have assigned an identifier to the block -. By the identifier, we can refer to the block using css.
Step 3
Next, you need to set the css styles to the block. List of styles: "position: relative;" - will set the origin from the upper left corner of our block; "margin: 50px auto;" - will set the indentation of our block "50px" above and below the rest of the page content, as well as set the automatic indentation to the right and left, thus aligning our block in the center; "width: 900px; height: 650px;" - will set the width to 900px and the height to 650px, respectively.
The specified list of styles must be placed in this way:
#photo_page {
position: relative;
margin: 0 auto;
width: 900px;
height: 650px;
text-align: center;
}
Note the use of "#photo_page" - this is how we refer to the block ID.
Step 4
Now we will assign general styles for each image inside the photo_page block. These are rounded corners, gray border, white background, padding, and drop shadow.
This will create a photographic effect:
#photo_page img {
border-radius: 7px;
border: 1px solid gray;
background: #ffffff;
padding: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Note the use of "#photo_page img" - this will refer to all images inside the photo_page block
Step 5
It's also important to add a short style like this:
#photo_page div {
float: left;
}
It shrinks all blocks inside the photo_page block to the left.
Step 6
The intermediate stage of the lesson has now been completed. If your work is similar to the image in the screenshot, then you have not made a mistake and can proceed to the next step.
Step 7
Now we turn to rotate the posted photos. For this we need the transform style. At the moment, it is not used in its pure form, but only with a prefix for each browser at the beginning, like this:
-webkit-transform: rotate (value);
-moz-transform: rotate (value);
-o-transform: rotate (value);
This is the rotation style for browsers: Google Chrome, Mazilla, Opera (respectively). Instead of the word "value", we will insert a number with deg at the end, like this:
90deg - rotate 90 degrees clockwise.
-5deg - rotate -5 degrees counterclockwise.
Etc.
Step 8
Style for photo photo_1:
# photo_1 {
-webkit-transform: rotate (5deg);
-moz-transform: rotate (5deg);
-o-transform: rotate (5deg);
}
The first image is rotated 5 degrees.
Step 9
Style for photo photo_2:
# photo_2 {
-webkit-transform: rotate (-3deg);
-moz-transform: rotate (-3deg);
-o-transform: rotate (-3deg);
}
The second image is rotated -3 degrees.
Step 10
Style for photo photo_3:
# photo_3 {
-webkit-transform: rotate (-2deg);
-moz-transform: rotate (-2deg);
-o-transform: rotate (-2deg);
}
The third image is rotated -2 degrees.
Step 11
Style for photo photo_4:
# photo_4 {
-webkit-transform: rotate (8deg);
-moz-transform: rotate (8deg);
-o-transform: rotate (8deg);
}
The fourth image is rotated 8 degrees.
Step 12
Let's look at how you can correct the position of images. For example, let's say you want to offset the first image 20px from the top and 10px from the left. In this case, you need to use the margin style. Here's the correct way to use it for our case:
# photo_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: rotate (5deg);
-moz-transform: rotate (5deg);
-o-transform: rotate (5deg);
}
Please note that the first value of the style is the top margin; second - indent to the right the third is an indent from the bottom; fourth - left indent.
Important: in our case, the bottom margin is equal to the negative value of the top margin. If you see white space below the image on your page, try to indent the bottom of the image even more negatively.
Step 13
The work is complete, I provide a screenshot (taking into account the change in the indentation of the first image described in Step 12).
Add indentation style to any images that are not in position to suit you.
