CSS3制作酷炫的三维相册效果

太阳渐渐往下落,它的脸涨得越来越红,红的像个大火球,把身边的云染成五颜六色。慢慢地它走到西山背后,把美丽的霞光留在遥远的天边。我们都看得目瞪口呆。我的心里在想:晚霞真美!

特炫的三维相册分享出来,希望大家喜欢!

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>三维动画</title>
  6. <styletype="text/css">
  7. *{
  8. padding:0px;
  9. margin:0px;
  10. }
  11. body{
  12. background:url(images/758.jpg)no-repeattopcenter;
  13. }
  14. .product{
  15. height:400px;
  16. position:fixed;
  17. top:20%;
  18. right:20%;
  19. /*视距*/
  20. perspective:500px;
  21. }
  22. .scene{
  23. height:250px;
  24. width:250px;
  25. transform-style:preserve-3d;
  26. transform-origin:50%;
  27. margin:100px;
  28. /*定义一个名为slide的动画*/
  29. animation:slide12slinearinfinite;
  30. }
  31. .sceneulli{
  32. width:230px;
  33. height:230px;
  34. list-style:none;
  35. border:5pxsolidrgba(255,255,255,0.5);
  36. position:absolute;
  37. }
  38. @keyframesslide{
  39. from{
  40. transform:rotateY(0deg);
  41. }
  42. to{
  43. transform:rotateY(360deg);
  44. }
  45. }
  46. .s1{
  47. float:left;
  48. }
  49. .s1ulli:nth-child(1){
  50. transform:rotateY(0deg)translateZ(118px);
  51. }
  52. .s1ulli:nth-child(2){
  53. transform:rotateY(90deg)translateZ(118px);
  54. }
  55. .s1ulli:nth-child(3){
  56. transform:rotateY(180deg)translateZ(118px);
  57. }
  58. .s1ulli:nth-child(4){
  59. transform:rotateY(-90deg)translateZ(118px);
  60. }
  61. .s2{
  62. float:right;
  63. }
  64. .s2ulli:nth-child(1){
  65. transform:rotateY(0deg)translateZ(200px);
  66. }
  67. .s2ulli:nth-child(2){
  68. transform:rotateY(90deg)translateZ(200px);
  69. }
  70. .s2ulli:nth-child(3){
  71. transform:rotateY(180deg)translateZ(200px);
  72. }
  73. .s2ulli:nth-child(4){
  74. transform:rotateY(-90deg)translateZ(200px);
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <divclass='product'>
  80. <!--scene类是为了修饰两个div的相同点-->
  81. <!--s1和s2是为了显示两个div的不同,一个左浮动,一个右浮动-->
  82. <divclass='scenes1'>
  83. <ul>
  84. <li><imgsrc="images/1.jpg"/></li>
  85. <li><imgsrc="images/2.jpg"/></li>
  86. <li><imgsrc="images/3.jpg"/></li>
  87. <li><imgsrc="images/4.jpg"/></li>
  88. </ul>
  89. </div>
  90. <divclass='scenes2'>
  91. <ul>
  92. <li><imgsrc="images/1.jpg"/></li>
  93. <li><imgsrc="images/2.jpg"/></li>
  94. <li><imgsrc="images/3.jpg"/></li>
  95. <li><imgsrc="images/4.jpg"/></li>
  96. </ul>
  97. </div>
  98. </div>
  99. </body>
  100. </html>

下面是截图:

本文CSS3制作酷炫的三维相册效果到此结束。就算有风雨的阻拦,他也只不过是一时之吓,是坚强的理由盖过了它的存在,因此他自然变得渺小而不可视,所以没有什么可以成为前进的拦路虎;因为我们有一双天使翅膀的陪伴,带我们飞越新世纪,创造新辉煌。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
CSS3 3D酷炫立方体变换动画的如何实现

CSS3制作酷炫的条纹背景

CSS3近阶段篇之酷炫的3D旋转透视

基于html和CSS3制作酷炫的导航栏

如何利用CSS如何实现酷炫的下拉框特效