Home > Developer > Web Develop
RotateThe parameter of the method, if positive, indicates a clockwise rotation, or a negative number, which rotates counterclockwise. Grammar explained, I now teach you to develop a photo wall, the effect is as follows: OK, according to, we split the display area: One area shows the wood background, three areas display the corresponding photos. The following is my one-step study: First, define the display area/* compatible with chrome and Safari */ / * compatible with Firefox*/* compatible with opera* / /* compatible with IE9*/* standard Syntax * /
!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8″> <Linkhref= "Styles.css"rel= "stylesheet"> <!–css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure–> <title>CSS3 2D Conversion Technology rotate practical development</title> </Head> <Body> <ahref= "http://www.itdriver.cn">Practical Internet</a> <Div> <Div> <imgsrc= "Http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg"width= "256″Height= "200″> <P>At that moment, I was here to feel the ease of paradise</P> <P>Author: The flowers bloom in the MO</P> </Div> <Div> <imgsrc= "Http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg"width= "256″Height= "200″> <P>Like your smile, like the smell of the sun</P> <P>Author: The flowers bloom in the MO</P> </Div> <Div> <imgsrc= "Http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg"width= "256″Height= "200″> <P>The Sunflower in the mountains is blooming.</P> <P>Author: The flowers bloom in the MO</P> </Div> </Div> </Body></HTML>Run the effect at this time: two, to the photo wall implementation style Photo_wall, apply a background picture, set the margin of the photo wall, and set the use CSS3Flow layout to display photos on a photo wall. If you have CSS3Flow layout is not familiar or unfamiliar, please read my other blog post, I believe you will be proficient in this feature "CSS3 Practical Development: Responsive Web Interface design for elastic box model"。
*{/*clears the default margins and padding for all elements*/margin:0;padding:0;}. Photo_wall{background:URL (bg.jpg);/*define the default background for a photo wall*/background-size:cover;/*fill the background of a photo wall with a photo wall*/width:1200px;/*Set the width height of the photo wall*/Height:800px;margin:40px Auto;/*set the margin for a photo wall*/Display:-webkit-box;/*box model flow layout using CSS3*/Display:-moz-box;Display:Box;-webkit-box-align:Center;/*defines the inner element of the box model in the vertical direction of the middle position*/-moz-box-align:Center;box-align:Center;-webkit-box-pack:Center;/*defines the inner element of the box model in the middle position in the horizontal direction*/-moz-box-pack:Center;Box-pack:Center;}
Run the effect at this point: three, apply a style to the photo
Photo_frame, set the left white of the photo, the size of the text within the photo, and the effect of adding a shadow to the photo.
. Photo_wall. Photo_frame{text-align:Center;/*the text in the photo is centered*/padding:10px 10px 30px 10px;/*define the inner filler of the photo*/ /*set the background color of a photo*/font-size:. 8em;/*the size of the text within the photo*/Box-shadow:. 2em. 2em. 8em #130c0e;/*Add a shadow effect to your photos with a three-dimensional look*/}. Photo_frame P{Margin-top:10px;/*set the outer top margin of a text paragraph inside a photo*/}
The effect at this point: so far, the basic look of the photo has come out, and then apply what we have learned today, to add a rotation effect to the photo, so that the photo is more hierarchical, and more personalized. Four, each photo to apply style photo01,photo02,photo03, each photo with its own set of rotation point rotation operation. The code is as follows:
. Photo01{-webkit-transform-origin:Right bottom;/*define the rotation base of photo 1 to the lower right corner*/-moz-transform-origin:Right bottom;Transform-origin:Right bottom;-webkit-transform:Rotate (10deg);/*rotates 10 degrees clockwise in 2D space with the base point as the Axis*/-moz-transform:Rotate (10deg);-o-transform:Rotate (10deg);Transform:Rotate (10deg);}. photo02{-webkit-transform-origin:Right bottom;/*define the rotation base of photo 2 to the lower right corner*/-moz-transform-origin:Right bottom;Transform-origin:Right bottom;-webkit-transform:Rotate ( -20deg);/*rotate 20 degrees counterclockwise in 2D space with the base point as the Axis*/-moz-transform:Rotate ( -20deg);-o-transform:Rotate ( -20deg);Transform:Rotate ( -20deg);}. photo03{-webkit-transform-origin:Left top;/*define the rotation point of photo 3 to the top left corner*/-moz-transform-origin:Left top;Transform-origin:Left top;-webkit-transform:Rotate (40deg);/*rotates 40 degrees clockwise in 2D space with the base point as the Axis*/-moz-transform:Rotate (40deg);-o-transform:Rotate (40deg);Transform:Rotate (40deg);}At this point, the operation effect:
"CSS3 actual combat development: hands-on teaching you photo wall combat development"Already finished. Thank you for reading. More wonderful practical tutorials, I will continue to update, we look forward to it!
welcome everyone to join the Internet Technology Exchange QQ Group:62329335
Personal statement: share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify. 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
