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. }
  32. .sceneulli{
  33. width:230px;
  34. height:230px;
  35. list-style:none;
  36. border:5pxsolidrgba(255,255,255,0.5);
  37. position:absolute;
  38. }
  40. @keyframesslide{
  41. from{
  42. transform:rotateY(0deg);
  43. }
  45. to{
  46. transform:rotateY(360deg);
  47. }
  48. }
  49. .s1{
  50. float:left;
  51. }
  52. .s1ulli:nth-child(1){
  53. transform:rotateY(0deg)translateZ(118px);
  54. }
  55. .s1ulli:nth-child(2){
  56. transform:rotateY(90deg)translateZ(118px);
  57. }
  58. .s1ulli:nth-child(3){
  59. transform:rotateY(180deg)translateZ(118px);
  60. }
  61. .s1ulli:nth-child(4){
  62. transform:rotateY(-90deg)translateZ(118px);
  63. }
  64. .s2{
  65. float:right;
  66. }
  67. .s2ulli:nth-child(1){
  68. transform:rotateY(0deg)translateZ(200px);
  69. }
  70. .s2ulli:nth-child(2){
  71. transform:rotateY(90deg)translateZ(200px);
  72. }
  73. .s2ulli:nth-child(3){
  74. transform:rotateY(180deg)translateZ(200px);
  75. }
  76. .s2ulli:nth-child(4){
  77. transform:rotateY(-90deg)translateZ(200px);
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <divclass='product'>
  83. <!--scene类是为了修饰两个div的相同点-->
  84. <!--s1和s2是为了显示两个div的不同，一个左浮动，一个右浮动-->
  85. <divclass='scenes1'>
  86. <ul>
  87. <li><imgsrc="images/1.jpg"/></li>
  88. <li><imgsrc="images/2.jpg"/></li>
  89. <li><imgsrc="images/3.jpg"/></li>
  90. <li><imgsrc="images/4.jpg"/></li>
  91. </ul>
  92. </div>
  93. <divclass='scenes2'>
  94. <ul>
  95. <li><imgsrc="images/1.jpg"/></li>
  96. <li><imgsrc="images/2.jpg"/></li>
  97. <li><imgsrc="images/3.jpg"/></li>
  98. <li><imgsrc="images/4.jpg"/></li>
  99. </ul>
  100. </div>
  101. </div>
  102. </body>
  103. </html>

下面是截图：

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

您可能有感兴趣的文章
CSS3 3D酷炫立方体变换动画的如何实现
CSS3制作酷炫的条纹背景
CSS3近阶段篇之酷炫的3D旋转透视
基于html和CSS3制作酷炫的导航栏
如何利用CSS如何实现酷炫的下拉框特效