Css3 photo wall and css3 photo

Css3 photo wall and css3 photo

A picture is scattered and scattered together. When the mouse is suspended, the image is rotated and scaled up. The effect is as follows (all images are from the network). The css3 attributes used mainly include: transition, transform (scale, rotateZ), box-shadow, and z-index.

<! DOCTYPE html> 
This example is only compatible with webkit kernels. To be compatible with browsers of other kernels, you must add other prefixes (-moz-,-o-, and so on ).
In addition, the positive and negative directions of the rotateZ attribute values used in this example often lead to confusion. In 3D scenarios, the positive direction of the X axis is horizontal to the right, and the positive direction of the Y axis is vertical to the downward direction, the positive direction of the Z axis is perpendicular to the screen. After determining the positive direction, you only need to remember the following rules: Start from the coordinate origin and look toward the positive direction of the coordinate axis, the value of rotate (X/Y/Z) is positive when it is clockwise. When it is clockwise, the value of rotate (X/Y/Z) is negative.