本文包含

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:

  1. <body>
  2.         <div class="d_photo">
  3.             <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div>
  4.             <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div>
  5.             <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div>
  6.             <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div>
  7.             <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div>
  8.         <div class="d_photo">
  9.             <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div>
  10.             <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div>
  11.             <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div>
  12.             <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div>
  13.             <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div>
  14.         </div>
  15.     </body>

CSS：

  1. 　　　　　　　　　　　　　　body{
  2. 				width: 100%;
  3. 				background-image: url("img/bg.jpg") ;
  4. 			}
  5. 			.d_photo{
  6. 				width: 900px;
  7. 				height: 180px;
  8. 				margin-top: 10px;
  9. 				margin-left: auto;
  10. 				margin-right: auto;
  11. 			}
  12. 			.sig_photo{
  13. 				float: left;
  14. 				width: 150px;
  15. 				height: 150px;
  16. 				margin-top: 20px;
  17. 				margin-left: 20px;
  18. 			}
  19. 			img{
  20. 				width: 150px;
  21. 				height: 150px;
  22. 				-moz-transition: width 1s,height 1s,transform 1s;
  23. 				-webkit-transition: width 1s,height 1s,transform 1s;
  24. 			}
  25. 			#pic1{
  26. 				-moz-transform: rotate(5deg);
  27. 				-webkit-transform: rotate(5deg);
  28. 			}
  29. 			#pic2{
  30. 				-moz-transform: rotate(-6deg);
  31. 				-webkit-transform: rotate(-6deg);
  32. 			}
  33. 			#pic3{
  34. 				-moz-transform: rotate(4deg);
  35. 				-webkit-transform: rotate(4deg);
  36. 			}
  37. 			#pic4{
  38. 				-moz-transform: rotate(-3deg);
  39. 				-webkit-transform: rotate(-3deg);
  40. 			}
  41. 			#pic5{
  42. 				-moz-transform: rotate(6deg);
  43. 				-webkit-transform: rotate(-6deg);
  44. 			}
  45. 			#pic6{
  46. 				-moz-transform: rotate(-5deg);
  47. 				-webkit-transform: rotate(-5deg);
  48. 			}
  49. 			#pic7{
  50. 				-moz-transform: rotate(7deg);
  51. 				-webkit-transform: rotate(7deg);
  52. 			}
  53. 			#pic8{
  54. 				-moz-transform: rotate(4deg);
  55. 				-webkit-transform: rotate(4deg);
  56. 			}
  57. 			#pic9{
  58. 				-moz-transform: rotate(-4deg);
  59. 				-webkit-transform: rotate(-4deg);
  60. 			}
  61. 			#pic10{
  62. 				-moz-transform: rotate(5deg);
  63. 				-webkit-transform: rotate(5deg);
  64. 			}
  65. 			#pic1:hover{
  66. 				width: 300px;
  67. 				height: 350px;
  68. 				z-index: 10;
  69. 				-moz-transform: rotate(360deg);
  70. 				-webkit-transform:rotate(360deg);
  71. 			}
  72. 			#pic2:hover{
  73. 				z-index: 10;
  74. 				-moz-transform: scale(1.15);
  75. 				-webkit-transform:scale(1.15);
  76. 			}
  77. 			#pic3:hover{
  78. 				width: 300px;
  79. 				height: 350px;
  80. 				z-index: 10;
  81. 				-moz-transform: rotate(0deg);
  82. 				-webkit-transform: rotate(0deg);
  83. 			}
  84. 			#pic4:hover{
  85. 				-moz-transform: rotateY(180deg);
  86. 				-webkit-transform: rotateY(180deg);
  87. 				z-index: 10;
  88. 			}
  89. 			#pic5:hover{
  90. 				-moz-transform: rotateZ(180deg);
  91. 				-webkit-transform: rotateZ(180deg);
  92. 				z-index: 10;
  93. 			}
  94. 			#pic6:hover{
  95. 				-moz-transform: rotateX(180deg);
  96. 				-webkit-transform: rotateX(180deg);
  97. 				z-index: 10;
  98. 			}
  99. 			#pic7:hover{
  100. 				width: 300px;
  101. 				height: 350px;
  102. 				-moz-transform: translate(100px,-170px);
  103. 				-webkit-transform: translate(100px,-170px);
  104. 				z-index: 10;
  105. 			}
  106. 			#pic8:hover{
  107. 				width: 300px;
  108. 				height: 350px;
  109. 				z-index: 10;
  110. 				-moz-transform: translate(0px,-170px);
  111. 				-webkit-transform: translate(0px,170px);
  112. 			}

以上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. Bug驱动开发（Bug-driven development）

    说实话,作为一个Domino开发者,像測试驱动开发(Test-driven development).功能驱动开发(Feature-driven development)之类软件开发的高大上的方法论( ...

  2. T-SQL函数及用法--转

    转自http://www.cnblogs.com/qixuejia/archive/2010/07/14/1777105.html 1. 聚合函数 (1) AVG 函数功能返回组中值的平均值.空值将被 ...

  3. asp.net个人笔记

    1.进程外session一记 配置进程外session, 在webconfig中配置<sessionState timeout="60" mode="StateSe ...

  4. linux驱动调试--段错误之oops信息分析

    linux驱动调试--段错误之oops信息分析 http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=29401328&id= ...

  5. Null指针

    C++ Null 指针 C++ 指针 C++ 指针 在变量声明的时候,如果没有确切的地址可以赋值,为指针变量赋一个 NULL 值是一个良好的编程习惯.赋为 NULL 值的指针被称为空指针. NULL ...

  6. BZOJ 1782: [Usaco2010 Feb]slowdown 慢慢游( BIT + dfs )

    orz...hzwer 对着大神的 code 看 , 稍微理解了. 考虑一只牛到达 , 那它所在子树全部 +1 , 可以用BIT维护 --------------------------------- ...

  7. PHP 字符串处理 总结

    PHP 字符串处理 PHP 字符串处理 PHP 的字符串处理功能非常强大,主要包括: 字符串输出 echo():输出一个或多个字符串 print():输出一个字符串 printf():输出格式化字符串 ...

  8. PHP自练项目中个人中心创建，修改，验证（服务器端和客户端验证）

    当注册成功到登录后进入个人中心,查看和修改自己的资料 第一步:创建个人中心: <?php //定义个常量,用来授权调用includes里面的文件 define('IN_TG',true); // ...

  9. Nginx阅读笔记(二)之location的用法

    两个配置文件 一: server { listen 80; # # 在本机所有ip上监听80,也可以写为192.168.1.202:80,这样的话,就只监听192.168.1.202上的80口 ser ...

  10. 投票系统前台 C#，数据库SQL

    ------------vote.aspx.cs--------------------  private void Page_Load(object sender, System.EventArgs ...