`
陌上花会开
  • 浏览: 37803 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

阅读更多
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之后,它会发生旋转的效果。
 
语法:
 
 
rotate方法的参数如果是正数,则表示顺时针旋转;如果是负数,则表示逆时针旋转。
 
语法讲解完了,我现在手把手教大家开发一个照片墙,效果如下:
20140806122701
 
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>
             <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>
 
 
此时运行效果:
20140806122702
 
 
二、给照片墙实现样式photo_wall,应用背景图片,设置照片墙的外边距,同时设置使用CSS3的流式布局来显示照片墙上的照片。如果你对CSS3的流式布局不太了解或不太熟悉,请阅读我的另一篇博文,相信你会精通这个特性《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
 
 
 
此时运行效果:
20140806122703
 
 
三、给照片应用样式photo_frame,设置照片的留白,同时这只照片内文字的大小,以及给照片增加阴影效果。
 
 
此时的运行效果:
20140806122704
 
 
 
到目前为止,照片的基本样子已经出来了,接着应用我们今天所学的内容,给照片添加旋转效果吧,这样将使照片更富层次感,且更加个性化。
 
四、分别给照片应用样式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);
}
 

 

 
此时的运行效果:
20140806122705
 
 
至此,《CSS3实战开发:手把手教你照片墙实战开发》已经讲完了。谢谢大家的阅读。
更多精彩实战教程,我会陆续更新,大家敬请期待吧!
 
欢迎大家加入互联网技术交流群:62329335 

 

个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
4
0
分享到:
评论
1 楼 wx_hello 2014-08-08  
CSS3是不是兼容这些主流浏览器?

相关推荐

    《CSS3实战:开发与设计》源码

    本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一...

    css3实战:开发与设计迷你书

    css3实战:开发与设计迷你书(1-3章)试读版,添加定位目录方便查阅

    《CSS3实战》配套源码part3

    此为《CSS3实战》的配套源码和插图,分三部分上传,此为第三部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...

    《CSS3实战》配套源码part1

    此为《CSS3实战》的配套源码和插图,分三部分上传,此为第一部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...

    css动态照片墙.rar

    这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片 这是一个动态的照片墙网页,可以修改照片连接替换成自己的照片

    《CSS3实战》配套源码part2

    此为《CSS3实战》的配套源码和插图,分三部分上传,此为第二部分。 《CSS3实战》由国内资深Web前端工程师撰写,权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者,那么《CSS 3实战》也许会让你在即将到来的Web...

    jQuery+CSS3实现的非常实用的照片墙

    jQuery+CSS3实现的非常实用的照片墙,供大家一起共同分享学习。

    CSS高效开发实战

    《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容...

    《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》epub

    《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》epub版

    CSS3悬挂的照片墙效果代码.zip

    CSS3悬挂的照片墙效果代码是一款基于CSS3 transform 属性制作悬挂的照片墙效果代码。

    html5+css3实战 例子

    html5和css3相互配合使用,能够更快速,代码更简洁易懂,便于开发者使用,节省开发时间。

    css3实现照片墙

    慢慢的靠近css3,制作一个简单的照片展示效果。

    HTML5 CSS3 3D JQuery 实现照片墙

    HTML5+css3制作的超酷3D照片墙jQuery特效代码.rar 实现特炫照片墙及照片库

    HTML5&CSS3网页制作:CSS控制表单样式.pptx

    CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。...通过实战项目掌握CSS 表单样式规则 总结 THANKS

    CSS3之学习必备书籍《CSS3 实战》

    CSS3之学习必备书籍《CSS3 实战》.

    JS、CSS超酷3D照片墙

    JS+CSS=&gt;超酷3D照片墙,不下不知道,下了想推荐!

    纯css3 transform图片倾斜排列成照片墙效果

    纯css3 transform图片倾斜排列成照片墙效果 纯css3 transform图片倾斜排列成照片墙效果

    div+css实战项目:有道云页面

    这个是培训学校老师讲的div+css实战项目,做前端开发的可以参考。对网页切图,布局都有涉及。

Global site tag (gtag.js) - Google Analytics