CSS3实战开发:手把手教你照片墙实战开发 博客分类: css3div+css csscss3rotatetransform照片墙实战
程序员文章站
2024-03-25 18:12:46
...
在《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方法的参数如果是正数,则表示顺时针旋转;如果是负数,则表示逆时针旋转。
语法讲解完了,我现在手把手教大家开发一个照片墙,效果如下:
ok,根据效果图,我们拆分一下显示区域:一个区域显示木板背景,三个区域显示相应照片。下面就跟着我的一步步的学习吧:
一、 定义显示区域
此时运行效果:
二、给照片墙实现样式photo_wall,应用背景图片,设置照片墙的外边距,同时设置使用CSS3的流式布局来显示照片墙上的照片。如果你对CSS3的流式布局不太了解或不太熟悉,请阅读我的另一篇博文,相信你会精通这个特性《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》。
此时运行效果:
三、给照片应用样式photo_frame,设置照片的留白,同时这只照片内文字的大小,以及给照片增加阴影效果。
此时的运行效果:
到目前为止,照片的基本样子已经出来了,接着应用我们今天所学的内容,给照片添加旋转效果吧,这样将使照片更富层次感,且更加个性化。
四、分别给照片应用样式photo01,photo02,photo03,每张照片以自己设定的旋转基点进行旋转操作。代码如下:
此时的运行效果:
至此,《CSS3实战开发:手把手教你照片墙实战开发》已经讲完了。谢谢大家的阅读。
更多精彩实战教程,我会陆续更新,大家敬请期待吧!
欢迎大家加入互联网技术交流群:62329335
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
上一篇: CSS3属性选择器详解 及 双色球实战开发 博客分类: css3 css3属性选择器元素选择器双色球实战开发
下一篇: CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹) 博客分类: css3div+css csscss3css3动画特效css动画特效实战开发
推荐阅读
-
CSS3实战开发:手把手教你鼠标滑动特效开发 博客分类: div+csscss3 csscss3动画特效
-
CSS3实战开发:手把手教大家搜索表单发光特效实战开发 博客分类: css3div+css animationcsscss3动画特效
-
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹) 博客分类: css3div+css csscss3css3动画特效css动画特效实战开发
-
CSS3实战开发:手把手教你照片墙实战开发 博客分类: css3div+css csscss3rotatetransform照片墙实战
-
CSS3实战开发:手把手教你照片墙实战开发 博客分类: css3div+css csscss3rotatetransform照片墙实战
-
CSS3实战开发:手把手教你鼠标滑动特效开发 博客分类: div+csscss3 csscss3动画特效
-
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效 博客分类: css3div+css csscss3实战开发动画特效
-
CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效 博客分类: css3div+css csscss3实战开发动画特效
-
CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose
-
CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose