Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use css3 to achieve photo wall effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css3 to achieve photo wall effect" this article.

The code is as follows:

* {margin:0;padding:0;} html,body {background:#eee;} / * set the scene to be centered * / .wall {width:1000px;height:700px;position:fixed;top:50%;margin-top:-350px;left:50%;margin-left:-500px;} / * set the absolute positioning of the picture, facilitate setting the placement position, and set the transition time of all attributes to 0.2s*/img {position:absolute;display:block;max-width:300px;max-height:300px Padding:10px 10px 20pxquarterBackgroundDefffTo border1px solid # ddd;-webkit-transition:0.2s;} / * when the mouse is hovering, the size is enlarged to 1.2x and righted, that is, the rotation angle in the Z-axis direction is 0*/img:hover {- webkit-transform:scale (1.2) rotateZ (0); box-shadow:10px 10px 5px # 555z indexposition 2;} / * set the position and rotation angle of each photo * / .img1 {left:0;top:0 -webkit-transform:rotateZ (20deg);} .img2 {left:280px;top:0;-webkit-transform:rotateZ (5deg);} .img3 {left:470px;top:0;-webkit-transform:rotateZ (- 10deg);} .img4 {left:720px;top:0;-webkit-transform:rotateZ (25deg);} .img5 {left:220px;top:200px;-webkit-transform:rotateZ (- 2deg);} .img6 {left:830px;top:240px;-webkit-transform:rotateZ (- 15deg);} .img7 {left:490px Top:190px;-webkit-transform:rotateZ (5deg);} .img8 {left:80px;top:430px;-webkit-transform:rotateZ (- 5deg);} .img9 {left:290px;top:450px;-webkit-transform:rotateZ (5deg);} .img10 {left:510px;top:380px;-webkit-transform:rotateZ (- 10deg);} .img11 {left:760px;top:500px;-webkit-transform:rotateZ (10deg);} .img12 {left:-100px;top:250px;-webkit-transform:rotateZ (- 5deg);}

This example is only compatible with browsers with webkit kernels. Browsers compatible with other kernels need to add other prefixes (- moz-,-o -, etc.).

In addition, the positive and negative directions of the values of the rotateZ attribute used in this example often cause confusion. In the 3D scene, the positive direction of the X axis is horizontal to the right, the positive direction of the Y axis is vertical downward, and 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: starting from the coordinate origin and looking toward the positive direction of the coordinate axis, the value of rotate (X/Y/Z) is positive when rotating counterclockwise. When rotating clockwise, the rotate (X/Y/Z) value is negative.

The effect is very good, the code is also very simple, mainly to master several attributes of CSS3, the main use of css3 attributes are: transition, transform (scale, rotateZ), box-shadow and z-index.

The above is all the content of the article "how to use css3 to achieve Photo Wall effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.