Home >Web Front-end >HTML Tutorial >CSS3 practical development: teach you step by step practical development of photo wall_html/css_WEB-ITnose
CSS3 practical development: teach you step by step practical development of photo wall_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:351700browse
In the article "CSS3 2D Conversion Technology: Practical Development of Translate" , I listed the 2D conversion methods in CSS3:
1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()
At the same time, we have made special changes to the first method translate() Detailed introduction and led everyone to actually develop a navigation bar. If you don’t know or are not too familiar with translate, please read my blog post "CSS3 2D Conversion Technology - Practical Development of Translate" .
Before explaining the knowledge points, let me explain to you first. Some programmers will ask why it doesn’t work after I apply transform. In fact, transform in CSS3 is a block Only level elements or inline elements work.
In this chapter, I will lead you to explore today’s practical development of photo wall. Okay, without further ado, let’s get straight to today’s topic.
rotate, as the name suggests, means rotation. That is to say, if we apply rotate to a block element or an inline element, it will have a rotation effect.
Syntax:
-webkit-transform: rotate(20deg); /*兼容chrome与safari*/-moz-transform: rotate(20deg); /*兼容firefox*/-o-transform: rotate(20deg); /*兼容opera*/-ms-transform: rotate(20deg); /*兼容IE9*/transform: rotate(20deg); /*标准语法*/
rotate If the parameter of the method is a positive number, it means clockwise rotation; if it is a negative number, it means counterclockwise rotation.
Now that I have finished explaining the grammar, I will now teach you how to develop a photo wall. The effect is as follows:
ok, according to For the rendering, let's split the display area: one area displays the wood board background, and three areas display the corresponding photos. Follow my step-by-step learning below:
1. Define the display area
!DOCTYPE html><html><head> <meta charset=”utf-8″> <link href=”styles.css” rel=”stylesheet”> <!? css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure ?> <title>CSS3 2D转换技术之rotate实战开发</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div> <div> <img src=”http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg” width=”256″ height=”200″> <p>那一刻，我在这儿感受世外桃源的安逸</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg” width=”256″ height=”200″> <p>喜欢你的微笑，喜欢阳光下的味道</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg” width=”256″ height=”200″> <p>漫山的葵花盛开了</p> <p>作者: 陌上花会开</p> </div> </div> </body></html>
The running effect at this time:
2. Implement the style photo_wall for the photo wall, apply the background image, and set the photo wall margins, and set a fluid layout using CSS3 to display the photos on the photo wall. If you don’t know or are not familiar with the fluid layout of CSS3, please read my other blog post, I believe you will be proficient in this feature "CSS3 Practical Development: Response of Flexible Box Model" Style WEB interface design》.
*{ /*清空所有元素默认的外边距和内边距*/ margin:0; padding:0;} .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:800px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ display:-moz-box; display:box; -webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/ -moz-box-align:center; box-align:center; -webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/ -moz-box-pack:center; box-pack:center;} The running effect at this time:
3. Apply the style photo_frame to the photo, set the blank space of the photo, the size of the text in the photo, and add a shadow effect to the photo.
.photo_wall .photo_frame{ text-align:center; /*照片内的文字都是居中显示*/ padding:10px 10px 30px 10px; /*定义照片的内补白*/ /*设置照片的背景颜色*/ font-size:.8em; /*照片内文字的大小*/ box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/} .photo_frame p{ margin-top:10px; /*设置照片内显示文字段落的外上边距*/}
The running effect at this time:
So far, the basic appearance of the photo has come out. Let’s apply what we have learned today and add a rotation effect to the photo. This will make the photo more layered. And more personalized.
4. Apply styles photo01, photo02, photo03 to the photos respectively, and rotate each photo with its own set rotation base point. The code is as follows:
.photo01{ -webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(10deg); /*以基点为轴，在2D空间内顺时针旋转10度*/ -moz-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);} .photo02{ -webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(-20deg); /*以基点为轴，在2D空间内逆时针旋转20度*/ -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);} .photo03{ -webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/ -moz-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(40deg); /*以基点为轴，在2D空间内顺时针旋转40度*/ -moz-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg);} The running effect at this time:
At this point, "CSS3 Practical Development: Teach You Step by Step Practical Development of Photo Wall" has been finished. Thank you all for reading.
I will update more exciting practical tutorials one after another, so stay tuned!
Welcome to join the Internet technology exchange QQ group: 62329335
Personal statement: The blog posts shared are absolutely original and strive to capture every knowledge point All are verified through practical demonstrations.