CSS3实战开发:手把手教你照片墙实战开发_html/css

CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:00:35

原创

2051人浏览过

在 《CSS3 2D转换技术之translate实战开发》文章中，我给大家列出了 CSS3中的2D转换方法：

1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()

同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉，请阅读我的博文 《CSS3 2D转换技术之translate实战开发》 。

在讲解知识点之前，我先跟大家说明一下，有些程序员会问，为什么我应用了transform后不起作用呢，其实CSS3中的transform是对块级元素或者行内元素才起作用的。

本章我将带领大家一起来探索今天的 照片墙实战开发吧。好了，废话少说，直接进入今天的主题吧。

rotate，顾名思义，是表示旋转的意思，也就是说，如果我们给一个块元素或一个行内元素应用了rotate之后，它会发生旋转的效果。

语法：

-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方法的参数如果是正数，则表示顺时针旋转；如果是负数，则表示逆时针旋转。

语法讲解完了，我现在手把手教大家开发一个照片墙，效果如下：

ok，根据效果图，我们拆分一下显示区域：一个区域显示木板背景，三个区域显示相应照片。下面就跟着我的一步步的学习吧：

一、定义显示区域

!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>             @@##@@                <p>那一刻，我在这儿感受世外桃源的安逸</p>                <p>作者: 陌上花会开</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/950">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680003823895.png" alt="ViiTor实时翻译">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/950">ViiTor实时翻译</a>
                            <p>AI实时多语言翻译专家！强大的语音识别、AR翻译功能。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ViiTor实时翻译">
                                <span>116</span>
                            </div>
                        </div>
                        <a href="/ai/950" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ViiTor实时翻译">
                        </a>
                    </div>
                            </div>            <div>             @@##@@                <p>喜欢你的微笑，喜欢阳光下的味道</p>                <p>作者: 陌上花会开</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>            </div>            <div>             @@##@@                <p>漫山的葵花盛开了</p>                <p>作者: 陌上花会开</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>            </div>        </div>            </body></html>

登录后复制

此时运行效果:

二、给照片墙实现样式 photo_wall，应用背景图片，设置照片墙的外边距，同时设置使用 CSS3的流式布局来显示照片墙上的照片。如果你对 CSS3的流式布局不太了解或不太熟悉，请阅读我的另一篇博文，相信你会精通这个特性 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》。

*{ /*清空所有元素默认的外边距和内边距*/ 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;}

登录后复制

此时运行效果：

三、给照片应用样式 photo_frame，设置照片的留白，同时这只照片内文字的大小，以及给照片增加阴影效果。

.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; /*设置照片内显示文字段落的外上边距*/}

登录后复制

此时的运行效果：

到目前为止，照片的基本样子已经出来了，接着应用我们今天所学的内容，给照片添加旋转效果吧，这样将使照片更富层次感，且更加个性化。

四、分别给照片应用样式photo01，photo02，photo03，每张照片以自己设定的旋转基点进行旋转操作。代码如下：

.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);}

登录后复制

此时的运行效果：

至此， 《CSS3实战开发:手把手教你照片墙实战开发》已经讲完了。谢谢大家的阅读。

更多精彩实战教程，我会陆续更新，大家敬请期待吧！

欢迎大家加入互联网技术交流QQ群：62329335

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。