CSS make picture wall

A simple picture wall effect done by the CSS3 animation effect

：

Goal:

1. Use 10 pictures as photos.
2. The photos are placed randomly at different positions and angles of rotation.
3. When you move the mouse over a photo, the photo is rotated slowly from the tilt to the right, and the magnification appears on the top.

Knowledge points to use:

1. Box-shadow: Effect of adding a shadow to the border of an element

box-shadow:10px 10px 15px #ccc;

The first two parameters are the shadow effect in the upper and lower left and right of which two direction is cheap, positive words for the bottom or the left, negative words for the upper or the other.

The third parameter is the size of the shadow radius.

The fourth property is a shadow color.

The effect of a shadow appears when the mouse slides over the picture.
2. Position: To the element positioning, the main use of absolute positioning.

After you set the absolute positioning of each picture, the top and left properties are placed to place the pictures in different locations.

Position different pictures by setting absolute positioning for the picture.
3. Z-index: Sets the upper and lower layers of the element display

When you move the mouse over the lower picture, you need to move the underlying picture to the top, and the Z-index property controls the hierarchical relationship it displays. The Z-index value of the photo you want to show in the top level is set larger than the other photos.

  img{            z-index:1;        } img:hover{            z-index:2;        }

Set the level of the normal picture is 1; When the mouse is over, the level is 2;

4. Transition: The time required to set the process of changing the element from style 1 to style 2

Transition:all 0.5s ease-in;

The excessive properties of the animation.
5. Transform: A property that causes the element to deform with parameters such as rotate (rotation angle), scale (change size), skew (distorted element), etc.
In this small demo, using the Rotate and scale two properties to rotate the picture to a certain angle, the picture is magnified 1.2 times times when it is displayed to the top. Thus highlighting the top-level picture.

Transform:rotate (0DEG) scale (1.2);

CSS make picture wall