Pure css achieves 3D effect on the photo wall, css achieves 3d photo

Pure css achieves 3D effect on the photo wall, css achieves 3d photo

Every photo has beautiful stories and memories. The photo wall in the home helps you show the photos that carry important family memories. In addition to decorating the pictures with frames and hanging them on the wall, the photo wall can also evolve into a hand-painted photo wall. I often see some special effects on the photo wall on the internet, and I decided to try it on my own.

V directly uploads the code

This blog demonstrates the effect of a photo wall. So I don't need to talk much about it. I just need to go to the code and then display the special effect. If you are interested, you can try it by yourself. You can also modify the attributes to play more. We recommend that you use beautiful photos for your own test. It is absolutely "happy ".

1. Prepare materials:

There is no material to prepare. You just need to try it out: Baidu just needs to find a few beautiful pictures to test.

2.html code:

<! DOCTYPE html> 
3. CSS code:
* {Margin: 0; padding: 0;} body {background-color: # eee ;}. container {width: 960px; height: pixel PX; margin: 60px auto; position: relative ;}. img {/* width can be determined based on the selected photo content */width: 150px ;}. container img: hover {box-shadow: 15px 15px 20px rgba (50, 50, 0.4); transform: rotate3d (1.50, 1, 180deg) scale ); -webkit-transform: rotate3d (1,1, 1, 180deg) scale (1.50);-moz-transform: rotate3d (0deg, 0deg, 0deg) scale (1.50 ); -ms-transform: rotate3d (0deg, 0deg, 0deg) scale (1.50);/* the z-index of the image itself is 1, and set it to 2 when the mouse is passed, the image will be "up" */z-index: 2 ;}. container img {/* Add a photo frame effect */padding: 10px 10px 15px; background-color: white; border: 1px solid # ddd; box-shadow: 2px 2px 3px rgba (50, 50, 0.4);/* gradient animation effect */-moz-transition: all 0.5 s transition-in;-o-transition: all 0.5 s transfer-in;-webkit-transition: all 0.5 s transfer-in; transition: all 0.5 s transfer-in; z-index: 1 ;}. img1 {left: 400px; top: 0;/* CSS3 attribute transform: rotation: rotate, scaling: scale, skew: skew */transform: rotate (-5deg ); /*-webkit indicates chrome and safari private attributes */-webkit-transform: rotate (-5deg);/*-moz indicates firefox private attributes */-moz-transform: rotate (-5deg);/*-ms indicates the private attribute of IE browser */-ms-transform: rotate (-5deg );}. img2 {left: 600px; top: 0;/* the rotation angle can be determined based on your own aesthetics */transform: rotate (-20deg);-webkit-transform: rotate (-20deg);-moz-transform: rotate (-20deg);-ms-transform: rotate (-20deg );}. img3 {bottom: 0px; right: 0; transform: rotate (5deg);-webkit-transform: rotate (5deg);-moz-transform: rotate (5deg ); -ms-transform: rotate (5deg );}. img4 {bottom: 400px; left: 300px; transform: rotate (-10deg);-webkit-transform: rotate (-10deg);-moz-transform: rotate (-10deg ); -ms-transform: rotate (-10deg );}. img5 {bottom: 0px; top: 0; transform: rotate (-10deg);-webkit-transform: rotate (-10deg);-moz-transform: rotate (-10deg ); -ms-transform: rotate (-10deg );}. img6 {left: 0px; top: 0; transform: rotate (10deg);-webkit-transform: rotate (10deg);-moz-transform: rotate (10deg ); -ms-transform: rotate (10deg );}. img7 {left: 850px; top: 0; transform: rotate (20deg);-webkit-transform: rotate (20deg);-moz-transform: rotate (20deg ); -ms-transform: rotate (20deg );}. img8 {bottom:-20px; top: 650px; transform: rotate (5deg);-webkit-transform: rotate (5deg);-moz-transform: rotate (5deg ); -ms-transform: rotate (5deg );}. img9 {left: 550px; top: 100px; transform: rotate (15deg);-webkit-transform: rotate (15deg);-moz-transform: rotate (15deg ); -ms-transform: rotate (15deg );}
These comments of css Code are also very popular. You can check them yourself and modify some of the attributes to play with them.
4. Demo:
5. Download the source code:
Https://github.com/toutouge/webproject/tree/master/css3photowallvblog Summary
In fact, the effects of the photo wall can also be achieved with css3 many cool effects. For example, you can add a timer to make the image look like a rotating cube. That would be cool. If you are interested, try it yourself. Of course, you can search for some cool effects on the Internet, but if you really want to feel the charm of css3, you have to do it yourself.
 
 
Author:Please call my first brother 
Exit: http://www.cnblogs.com/toutou/
About the author: focused on Microsoft platform project development. If you have any questions or suggestions, please kindly advise me!
Copyright Disclaimer: The copyright of this article is shared by the author and the blog site. You are welcome to reprint this article. However, you must keep this statement without the author's consent and provide the original article link clearly on the article page.
We hereby declare that all comments and private messages will be replied immediately. You are also welcome to correct the mistakes and make progress together. Or directly send a private message to me.
Support blogger: If you think the article is helpful to you, click the bottom right corner of the article[Recommended]. Your encouragement is the greatest motivation for the author to stick to originality and continuous writing!