本文包含

1.CSS3中2D转换和3D转换的介绍。

2.在相册中的应用实例。

CSS3中的转换效果和动画效果十分强大好用，可以实现一些常见的动态效果。

如此一来，CSS3便可以代替许多jQuery的功能。

先来介绍一下CSS中的转换。

CSS3中转换有2D转换和3D转换之分。

2D转换(简单来说就是让某个元素改变大小和位置):

1.translate()方法

该方法包含两个参数，分别是对应的x轴，y轴偏移的距离(相对于控件的原位置进行移动)。

也可以根据translateX()方法单独设置x轴偏移量，translateY()方法设置Y轴偏移量。

2.rotate()方法

此方法包含一个参数，表示该空间以中心为圆心，顺时针转过的角度。可以为负值，表示逆时针转过的角度。

3.scale()方法

此方法包含两个参数，代表沿X轴和沿Y轴扩大的倍数。

4.skew()方法

skew()方法，该元素会根据X轴和Y轴线参数旋转给定的角度

5.matrix()方法

matrix方法将2D转换的方法合并为一个

matrix 方法有六个参数，包含旋转，缩放，移动和倾斜功能。

3D转换:

3D转换主要有一个方法。

rotateX(),rotateY(),rotateZ()。参数为一个角度值，分别围绕着X,Y,Z轴转相应的角度。

下面多介绍一个过渡属性transition:

transition：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。

接下来是一个纯CSS3转换效果做的相册例子

用到多种转换方法

HTML:

<body>

        <div class="d_photo">

            <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div>

            <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div>

            <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div>

            <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div>

            <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div>

        <div class="d_photo">

            <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div>

            <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div>

            <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div>

            <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div>

            <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div>

        </div>

    </body>

CSS：

　　　　　　　　　　　　　　body{

				width: 100%;

				background-image: url("img/bg.jpg") ;

			}

			.d_photo{

				width: 900px;

				height: 180px;

				margin-top: 10px;

				margin-left: auto;

				margin-right: auto;

			}

			.sig_photo{

				float: left;

				width: 150px;

				height: 150px;

				margin-top: 20px;

				margin-left: 20px;

			}

			img{

				width: 150px;

				height: 150px;

				-moz-transition: width 1s,height 1s,transform 1s;

				-webkit-transition: width 1s,height 1s,transform 1s;

			}

			#pic1{

				-moz-transform: rotate(5deg);

				-webkit-transform: rotate(5deg);

			}

			#pic2{

				-moz-transform: rotate(-6deg);

				-webkit-transform: rotate(-6deg);

			}

			#pic3{

				-moz-transform: rotate(4deg);

				-webkit-transform: rotate(4deg);

			}

			#pic4{

				-moz-transform: rotate(-3deg);

				-webkit-transform: rotate(-3deg);

			}

			#pic5{

				-moz-transform: rotate(6deg);

				-webkit-transform: rotate(-6deg);

			}

			#pic6{

				-moz-transform: rotate(-5deg);

				-webkit-transform: rotate(-5deg);

			}

			#pic7{

				-moz-transform: rotate(7deg);

				-webkit-transform: rotate(7deg);

			}

			#pic8{

				-moz-transform: rotate(4deg);

				-webkit-transform: rotate(4deg);

			}

			#pic9{

				-moz-transform: rotate(-4deg);

				-webkit-transform: rotate(-4deg);

			}

			#pic10{

				-moz-transform: rotate(5deg);

				-webkit-transform: rotate(5deg);

			}

			#pic1:hover{

				width: 300px;

				height: 350px;

				z-index: 10;

				-moz-transform: rotate(360deg);

				-webkit-transform:rotate(360deg);

			}

			#pic2:hover{

				z-index: 10;

				-moz-transform: scale(1.15);

				-webkit-transform:scale(1.15);

			}

			#pic3:hover{

				width: 300px;

				height: 350px;

				z-index: 10;

				-moz-transform: rotate(0deg);

				-webkit-transform: rotate(0deg);

			}

			#pic4:hover{

				-moz-transform: rotateY(180deg);

				-webkit-transform: rotateY(180deg);

				z-index: 10;

			}

			#pic5:hover{

				-moz-transform: rotateZ(180deg);

				-webkit-transform: rotateZ(180deg);

				z-index: 10;

			}

			#pic6:hover{

				-moz-transform: rotateX(180deg);

				-webkit-transform: rotateX(180deg);

				z-index: 10;

			}

			#pic7:hover{

				width: 300px;

				height: 350px;

				-moz-transform: translate(100px,-170px);

				-webkit-transform: translate(100px,-170px);

				z-index: 10;

			}

			#pic8:hover{

				width: 300px;

				height: 350px;

				z-index: 10;

				-moz-transform: translate(0px,-170px);

				-webkit-transform: translate(0px,170px);

			}

以上1-8每张图片，每张都是一种常用的转换方法，在此就不截图说明了，有兴趣可以试试。

纯CSS3实现常见多种相册效果的更多相关文章

  1. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  2. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  3. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  5. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  6. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  7. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  8. HTML5 纯CSS3实现正方体旋转3D效果

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

随机推荐

  1. Unity的NGUI插件篇——入场效果

    Unity的NGUI插件篇--入场效果 入场效果 入场效果须要借助于NGUI提供的TweenPosition类来完毕.为了说明此类的用法.本节将使会解说两个演示样例.本文选自  大学霸 <NGU ...

  2. aliyun硬盘挂载

    实在难以忍受公司服务器的网络问题,停用了半年的aliyun服务器今天终于决定启用了. 购买的时候是40G的硬盘空间,首先查了一硬盘情况结果发现有一个分区居然没有挂载.  第一步是创建一个分区 输入命令 ...

  3. js div 内容显示分页

    由于工作需要 div固定大小 而内容不定 所以 如果内容过多自然就显示不出来了 所以 需要分页一类的功能下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. mysql时间与字符串相互转换

    时间.字符串.时间戳之间的互相转换很常用,但是几乎每次使用时候都喜欢去搜索一下用法:本文整理一下三者之间的 转换(即:date转字符串.date转时间戳.字符串转date.字符串转时间戳.时间戳转da ...

  5. Onvif协议

    ONVIF致力于通过全球性的开放界面标准来推进网络视频在安防市场的应用,这一接口界面标准将确保不同厂商生产的网络视频监控产品具有互通性.2008年11月,论坛正式发布了ONVIF第一版规范ONVIF核 ...

  6. 条款20：宁以pass-by-reference-to-const替换pass-by-value

    本条款的要点: 1.尽量以pass-by-reference-to-const替换pass-by-value.前者更高效且可以避免切割问题. 2.这条规则并不适用于内建类型及STL中的迭代器和函数对象 ...

  7. JS拖动浮动DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>j ...

  8. linux操作系统死机处理办法

    这个方法可以在各种情况下安全地重启计算机.大家在键盘上找,可以找到一个叫做“Sys Rq”的键,在台机的键盘上通常与 Prt Sc 共键,在笔记本可能在其他位置,如 Delete.以台机为例,要使用这 ...

  9. 工商管理硕士(MBA)-北大国际MBA

    工商管理硕士(MBA)-北大国际MBA [EMBA校友跨届晚会]不管风雨彩虹 我们永远在一起

  10. JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理

    文章目录 Git管理准备工作 Git工具上传代码 发布代码装程序 mywebsql管理 京东云引擎小结   JAE京东云引擎是京东推出的支持Java.Ruby.Python.PHP.Node.js多语 ...