Home > Developer > Web Develop
vDirectly on the codeEvery photo has beautiful stories and wonderful memories. The photo wall in your home will help you to show these photos of the family's important memories, in addition to the picture frame decorative photos hanging on the wall, the photo wall can also evolve into a hand-painted photo wall. Also often on the internet to see some of the photo wall special effects cases, decided to try it yourself.
This blog is about demonstrating the effect of a photo wall. So don't say much nonsense, just go to the code and show the effects. Interested practiced hand can try their own practice. You can also change the properties of the game to play, their own testing when the proposed use of beautiful pictures, absolutely "enjoy".
1. Preparation Materials:
Preparation material is no material, their own slip quickly go: Baidu find a few pictures of beauty to test can.2.html Code:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>Photo Wall</title> <Linkhref= "Content/index.css"rel= "stylesheet" /></Head><Body> <Divclass= "Container"> <!--beautiful photos of their own preparation, sample photos Baidu has:) - <imgclass= "img img1"src= "Img/1.jpg" /> <imgclass= "img Img2"src= "Img/2.jpg" /> <imgclass= "img img3"src= "Img/3.jpg" /> <imgclass= "img Img4"src= "Img/4.jpg" /> <imgclass= "img Img5"src= "Img/5.jpg" /> <imgclass= "img Img6"src= "Img/6.jpg" /> <imgclass= "img Img7"src= "Img/7.jpg" /> <imgclass= "img Img8"src= "Img/8.jpg" /> <imgclass= "img img9"src= "Img/9.jpg" /> </Div></Body></HTML>
3.CSS Code:
* {margin:0;padding:0;}Body{Background-color:#eee;}. Container{width:960px;Height:450px;margin:60px Auto;position:relative;}. IMG{/*width can be based on your choice of photo content*/width:150px;}. Container Img:hover{Box-shadow:15px 15px 20px rgba (50,50,50,0.4);Transform:Rotate3d (1,1,1,180deg) scale (1.50);-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);/*its own picture of the Z-index is 1, the mouse after the time set to 2, then this picture will be "up"*/Z-index:2;}. Container img{/*effect of adding a photo frame to a picture*/padding:10px 10px 15px;Background-color: White;Border:1px solid #ddd;Box-shadow:2px 2px 3px rgba (50,50,50,0.4);/*fade out animation effect*/-moz-transition:All 0.5s ease-in;-o-transition:All 0.5s ease-in;-webkit-transition:All 0.5s ease-in;transition:All 0.5s ease-in;Z-index:1;}. IMG1{ Left:400px;Top:0;/*CSS3 Properties Transform: Rotation: Rotate, scaling: scale, tilt: skew*/Transform:Rotate ( -5deg);/*-webkit represents Chrome, safari private Properties*/-webkit-transform:Rotate ( -5deg);/*-moz on behalf of the Firefox browser private properties*/-moz-transform:Rotate ( -5deg);/*-ms for IE browser private properties*/-ms-transform:Rotate ( -5deg);}. Img2{ Left:600px;Top:0;/*the angle of rotation can be determined according to 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);}
CSS code These comments are also warm, you can see for yourself, you can change some of the properties to play more.
4. Effect Demo:
5. Source code Download:
Https://github.com/toutouge/WebProject/tree/master/CSS3PhotoWallvBlog SummaryPure CSS for photo wall 3D effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
