css 3D翻转图片动画

本例用了2个js

jquery.easing.1.3.js和modernizr.2.5.3.min.js

演示页面可以查看

?

演示

?

?

CSS Code

1. <style?type="text/css">??
2. ??
3. ????#note?{??
4. ????????font-size:11px;??
5. ????????color:#333;??
6. ????????padding:10px;??
7. ????????border:1px?solid?#b99f35;??
8. ????????background:#f4eccb;??
9. ????????border-radius:?3px;??
10. ????}??
11. ??????
12. ??
13. ??
14. ??????
15. ????.thumb?{??
16. ????????display:block;??
17. ????????width:200px;??
18. ????????height:140px;??
19. ????????position:relative;??
20. ????????margin-bottom:20px;??
21. ????????margin-right:20px;??
22. ????????float:left;??
23. ????}??
24. ??????
25. ????????.thumb-wrapper?{??
26. ????????????display:block;??
27. ????????????width:100%;??
28. ????????????height:100%;??
29. ????????}??
30. ??????
31. ????????.thumb?img?{??
32. ????????????width:100%;??
33. ????????????height:100%;??
34. ????????????position:absolute;??
35. ????????????display:block;????????????
36. ??????????????????????
37. ????????}??
38. ??????????
39. ????????.thumb?.thumb-detail?{??
40. ????????????display:block;??
41. ????????????width:100%;??
42. ????????????height:100%;??
43. ????????????position:absolute;????????????
44. ????????????background:#eee;??
45. ????????????font-family:arial;??
46. ????????????font-weight:bold;??
47. ????????????font-size:16px;???????????
48. ????????}??
49. ??????????
50. ????????.thumb?.thumb-detail?a?{??
51. ????????????display:block;??
52. ????????????width:100%;??
53. ????????????height:100%;??
54. ????????????text-transform:uppercase;??
55. ????????????font-weight:bold;?????
56. ????????????color:#333;??
57. ????????????text-decoration:none;?????????
58. ????????????font-family:?'Open?Sans',?sans-serif;??
59. ????????????letter-spacing:-1px;??
60. ????????????padding:10px;?????
61. ????????????font-size:18px;??
62. ????????}?????????
63. ??????
64. ????/*?
65. ????*?Without?CSS3?
66. ????*/??
67. ????.thumb.scroll?{??
68. ????????overflow:?hidden;??
69. ????}?????
70. ??????
71. ????????.thumb.scroll?.thumb-detail?{??
72. ????????????bottombottom:-280px;??
73. ????????}??
74. ??????
75. ??????
76. ????/*?
77. ????*?CSS3?Flip?
78. ????*/????
79. ????.thumb.flip?{??
80. ????????-webkit-perspective:800px;????????
81. ???????????-moz-perspective:800px;??
82. ????????????-ms-perspective:800px;????????????????
83. ?????????????-o-perspective:800px;??
84. ????????????????perspective:800px;??
85. ????}??
86. ??????
87. ????????.thumb.flip?.thumb-wrapper?{??
88. ????????????-webkit-transition:?-webkit-transform?1s;??
89. ???????????????-moz-transition:?-moz-transform?1s;??
90. ????????????????-ms-transition:?-moz-transform?1s;??
91. ?????????????????-o-transition:?-moz-transform?1s;??
92. ????????????????????transition:?-moz-transform?1s;??
93. ????????????-webkit-transform-style:?preserve-3d;??
94. ???????????????-moz-transform-style:?preserve-3d;?????????????
95. ????????????????-ms-transform-style:?preserve-3d;?????????????
96. ?????????????????-o-transform-style:?preserve-3d;?????????????
97. ??????????????????????transform-style:?preserve-3d;???????????
98. ????????}??
99. ??????????
100. ????????.thumb.flip?.thumb-detail?{??
101. ????????????-webkit-transform:?rotateY(-180deg);??
102. ???????????????-moz-transform:?rotateY(-180deg);??
103. ????????????????-ms-transform:?rotateY(-180deg);??
104. ?????????????????-o-transform:?rotateY(-180deg);??
105. ????????????????????transform:?rotateY(-180deg);??????????????????????????
106. ????????}??
107. ??????????
108. ????????.thumb.flip?img,??
109. ????????.thumb.flip?.thumb-detail?{??
110. ????????????-webkit-backface-visibility:?hidden;??
111. ???????????????-moz-backface-visibility:?hidden;??
112. ????????????????-ms-backface-visibility:?hidden;??
113. ?????????????????-o-backface-visibility:?hidden;??
114. ????????????????????backface-visibility:?hidden;??
115. ????????}??
116. ??????????
117. ????????.thumb.flip?.flipIt?{??
118. ????????????-webkit-transform:?rotateY(-180deg);??
119. ???????????????-moz-transform:?rotateY(-180deg);??????????????
120. ????????????????-ms-transform:?rotateY(-180deg);??????????????
121. ?????????????????-o-transform:?rotateY(-180deg);??????????????
122. ????????????????????transform:?rotateY(-180deg);??????????????
123. ????????}??
124. ??????
125. ????</style>??

?

JavaScript Code

1. <script?type="text/javascript">??
2. ????$(function?()?{??
3. ??????
4. ??
5. ????????if?($('html').hasClass('csstransforms3d'))?{??????
6. ??????????
7. ????????????$('.thumb').removeClass('scroll').addClass('flip');???????
8. ????????????$('.thumb.flip').hover(??
9. ????????????????function?()?{??
10. ????????????????????$(this).find('.thumb-wrapper').addClass('flipIt');??
11. ????????????????},??
12. ????????????????function?()?{??
13. ????????????????????$(this).find('.thumb-wrapper').removeClass('flipIt');?????????????
14. ????????????????}??
15. ????????????);??
16. ??????????????
17. ????????}?else?{??
18. ??
19. ????????????$('.thumb').hover(??
20. ????????????????function?()?{??
21. ????????????????????$(this).find('.thumb-detail').stop().animate({bottom:0},?500,?'easeOutCubic');??
22. ????????????????},??
23. ????????????????function?()?{??
24. ????????????????????$(this).find('.thumb-detail').stop().animate({bottom:?($(this).height()?*?-1)?},?500,?'easeOutCubic');????????????
25. ????????????????}??
26. ????????????);??
27. ??
28. ????????}??
29. ??????
30. ????});??
31. ????</script>??

?

XML/HTML Code

1. <div?id="container">??
2. ????<div?class="thumb?scroll">??
3. ????????<div?class="thumb-wrapper">??
4. ????????????<img?src="images/1.jpeg"?alt=""?/>??
5. ????????????<div?class="thumb-detail">??
6. ????????????????<a?href="">??
7. ????????????????????文字1??
8. ????????????????</a>??????????????????
9. ????????????</div>??
10. ????????</div>??
11. ????</div>????????
12. ??????
13. ????<div?class="thumb?scroll">??
14. ????????<div?class="thumb-wrapper">??
15. ????????????<img?src="images/2.jpeg"?alt=""?/>??
16. ????????????<div?class="thumb-detail">??
17. ????????????????<a?href="">??
18. ????????????????????文字2??
19. ????????????????</a>??
20. ????????????</div>??
21. ????????</div>??
22. ????</div>??
23. ??????
24. ????<div?class="thumb?scroll">??
25. ????????<div?class="thumb-wrapper">??
26. ????????????<img?src="images/3.jpeg"?alt=""?/>??
27. ????????????<div?class="thumb-detail">??
28. ????????????????<a?href="">??
29. ????????????????????文字3??
30. ????????????????</a>??????????????????
31. ????????????</div>??
32. ????????</div>??
33. ????</div>??
34. </div>??

?

原文地址:http://www.freejs.net/article_jquerytupiantexiao_93.html