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

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

1.   
2.   
3.   
4.   
5.   
6.   
7. * {   
8.     padding : 0px;   
9.     margin: 0px;   
10. }   
11. body {   
12.     background: url(images/758.jpg) no-repeat top center;   
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.        
29.     animation: slide 12s linear infinite;   
30. }   
31.   
32. .scene ul li {   
33.     width: 230px;   
34.     height: 230px;   
35.     list-style: none;   
36.     border: 5px solid rgba(255, 255, 255, 0.5);   
37.     position: absolute;   
38. }   
39.   
40. @keyframes slide{   
41.     from{   
42.         transform: rotateY(0deg);   
43.     }   
44.   
45.     to{   
46.         transform: rotateY(360deg);   
47.     }   
48. }   
49. .s1 {   
50.     float: left;   
51. }   
52. .s1 ul li:nth-child(1) {   
53.     transform: rotateY(0deg) translateZ(118px);   
54. }   
55. .s1 ul li:nth-child(2) {   
56.     transform: rotateY(90deg)  translateZ(118px);   
57. }   
58. .s1 ul li:nth-child(3) {   
59.     transform: rotateY(180deg)  translateZ(118px);   
60. }   
61. .s1 ul li:nth-child(4) {   
62.     transform: rotateY(-90deg)  translateZ(118px);   
63. }   
64. .s2 {   
65.     float: right;   
66. }   
67. .s2 ul li:nth-child(1) {   
68.     transform: rotateY(0deg) translateZ(200px);   
69. }   
70. .s2 ul li:nth-child(2) {   
71.     transform: rotateY(90deg)  translateZ(200px);   
72. }   
73. .s2 ul li:nth-child(3) {   
74.     transform: rotateY(180deg)  translateZ(200px);   
75. }   
76. .s2 ul li:nth-child(4) {   
77.     transform: rotateY(-90deg)  translateZ(200px);   
78. }   
79.   
80.   
81.   
82.       
83.       
84.       
85.           
86.             
      
    •                 
    • 
      
      
      
    •                 
    • 
      
      
      
    •                 
    • 
      
      
      
    •                 
    • 
      
      
      
    •             
      
87.