Practical development of CSS3: Hands-on teaching you how to develop the photo wall and css3

Practical development of CSS3: Hands-on teaching you how to develop the photo wall and css3
InCSS3 2D conversion technology-practical development of translateIn this article, I have listedCSS3In the 2D conversion method:1. translate () 2. rotate () 3. scale () 4. skew () 5. matrix ()At the same time, I made a very detailed introduction to the first method translate () and led everyone to develop a navigation bar. If you are not familiar with or are not familiar with translate, read my blog.CSS3 2D conversion technology-practical development of translate.Before explaining the knowledge point, I would like to explain to you that some programmers may ask why transform does not work after it is applied, in fact, the transform in CSS3 takes effect for block-level elements or in-row elements. In this chapter, I will lead you to explore today'sPhoto wall DevelopmentRight. Well, let's talk about the theme. Rotate, as its name implies, indicates rotation. That is to say, if rotate is applied to a block element or an element in the row, it will rotate.Syntax: 

-Webkit-transform: rotate (20deg);/* compatible with chrome and safari */-moz-transform: rotate (20deg);/* compatible with firefox */-o-transform: rotate (20deg);/* compatible with opera */-ms-transform: rotate (20deg);/* compatible with IE9 */transform: rotate (20deg);/* standard syntax */

 

  RotateIf the parameter is a positive value, it indicates clockwise rotation; if it is a negative value, it indicates clockwise rotation. After explaining the syntax, I am going to teach you how to develop a photo wall. The effect is as follows: OK. Let's split the display area: one area shows the wood board background, and three areas show the corresponding photos. Next, let's take a step-by-step approach: 1. Define the display area

! DOCTYPE html> Running Effect: 2. style the photo wall
Photo_wallApply the background image, set the margin of the photo wall, and set the usage
CSS3To display the photos on the photo wall. If you
CSS3The stream layout is not very familiar with or is not familiar with. Please read another blog post and I believe you will be proficient in this feature.
Practical development of CSS3: responsive WEB Interface Design of elastic Box Model.
* {/* Clear the default outer and inner margins of all elements */margin: 0; padding: 0 ;}. photo_wall {background: url(bg.jpg);/* define the Default background of the photo wall */background-size: cover;/* fill the photo wall with the background of the photo wall */width: pixel; /* set the width and height of the photo wall */height: 800px; margin: 40px auto;/* set the margin of the photo wall */display:-webkit-box; /* stream layout using the box Model of CSS3 */display:-moz-box; display: box;-webkit-box-align: center; /* define the inner element of the box model to be in the middle of the vertical direction */-moz-box-align: center;-webkit-box-pack: center; /* define that the internal elements of the box model are in the middle of the horizontal direction */-moz-box-pack: center ;}
 
Running Effect: 3. Apply the style to the photo
Photo_frame, Set the photo white, the size of the text in the photo, and add a shadow effect to the photo.
. Photo_wall. photo_frame {text-align: center;/* The text in the photo is displayed in the center */padding: 10px 10px 30px 10px; /* define the photo's inner padding * // * set the photo's background color */font-size :. 8em;/* size of text in the photo */box-shadow :. 2em. 2em. 8em # 130c0e;/* Add a shadow effect to the photo, with a stereoscopic effect */}. photo_frame p {margin-top: 10px;/* set the top margin of the text section displayed in the photo */}
 
The running effect is as follows: so far, the basic image of the photo has come out. Then, apply what we have learned today and add the Rotating effect to the photo. This will make the photo more appealing, and more personalized. 4. Apply the photo style photo01, photo02, and photo03 respectively. rotate each photo based on its own settings. The Code is as follows:
. Photo01 {-webkit-transform-origin: right bottom;/* define the rotation base point of photo 1 as the bottom right corner */-moz-transform-origin: right bottom; transform-origin: right bottom;-webkit-transform: rotate (10deg);/* uses the base point as the axis and rotates clockwise for 10 degrees in 2D space */-moz-transform: rotate (10deg ); -o-transform: rotate (10deg); transform: rotate (10deg );}. photo02 {-webkit-transform-origin: right bottom;/* define the rotation base point of Image 2 as the bottom right corner */-moz-transform-origin: right bottom; transform-origin: right bottom;-webkit-transform: rotate (-20deg);/* uses the base point as the axis and rotates 20 degrees counter-clockwise in 2D space */-moz-transform: rotate (-20deg);-o-transform: rotate (-20deg); transform: rotate (-20deg );}. photo03 {-webkit-transform-origin: left top;/* defines the rotation base point of Photo 3 as the upper left corner */-moz-transform-origin: left top; transform-origin: left top;-webkit-transform: rotate (40deg);/* rotate the axis clockwise for 40 degrees in 2D space based on the base point */-moz-transform: rotate (40deg ); -o-transform: rotate (40deg); transform: rotate (40deg );}
The running effect is as follows,
Practical development of CSS3: helping you develop Photo wallsThe lecture is complete. Thank you for reading this article. More exciting practical tutorials will be updated one after another. Please stay tuned!
Welcome to the internet technology exchange QQ group: 62329335
Personal statement: the shared blog is absolutely original, and strives to verify every knowledge point through practical demonstration. 

Do you have friends who want to learn PS? I teach you how to learn
100? So cheap? Haha

Who can cut my photo into eight pictures and make it into a photo wall?
You can buy a ready-made image directly from the Internet, and then you can cut the photo and arrange it with Templates. The layout is generally not so appropriate.