CSS3实现3D效果的图片墙

先来看一下效果：http://39.105.101.122/myhtml/CSS/transform_3D/img_3D.html

目前没有做IE的兼容，在谷歌浏览器里面可以看到效果

布局结构：

<div class="container">
        <img src="../Img/1.jpg">
        <img src="../Img/2.jpg">
        <img src="../Img/3.jpg">
        <img src="../Img/4.jpg">
        <img src="../Img/5.jpg">
        <img src="../Img/6.jpg">
        <img src="../Img/7.jpg">
        <img src="../Img/8.jpg">
        <img src="../Img/9.jpg">
        <img src="../Img/10.jpg">
    </div>

CSS3中新增了translate-style和perspective属性，要让图片有3D的效果就要添加这两个属性，具体的解释这里不再赘述，可以看这篇文章来理解：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

给container添加translate-style为preserve-3d，添加perspective: 2000px;

这里一共10张图片，为了让10张图片围成一个圆，需要添加position属性为absolute，设置宽度相同，居中，这时所有图片都重合在了一起。每张图片绕Y轴旋转36*i（i:0->9）度（rotateY），然后每张图片在Z轴方向移动相同的距离（translateZ），这个距离能保证图片不重合在一起就行。这时图片就围成了一个环状，并且是有3D效果的。然后给container添加动画属性让其绕Y轴不停旋转（rotateY），这时动画就出现了。

注意：给图片添加的属性transform: rotateY(0deg) translateZ(350px);rotateY和translateZ的位置不能交换，因为先旋转后移动和先移动后旋转的效果是不一样的。

这里我给container添加了背景颜色来参考图片的相对位置和旋转轴。

如果要用鼠标点击来切换图片的话，只需要每次点击之后container的旋转角度加36度就可以。

贴上代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>img_3D</title>
 6 </head>
 7 <style type="text/css">
 8     @keyframes an1{
 9         0%{
10             transform: rotateY(0deg)  ;
11         }
12         50%{
13             transform: rotateY(180deg)  ;
14         }
15         100%{
16             transform: rotateY(360deg) ;
17         }
18     }
19     .container{
20         width: 900px;
21         height: 400px;
22         background: rgba(255,0,0,0.5);
23         /*opacity: 0.3;*/
24 
25         margin: 200px auto;
26         perspective: 2000px;
27         transform-style: preserve-3d;
28         animation: an1 10s linear 0s infinite;
29     }
30     .container img{
31         width: 200px;
32         height: auto;
33         margin: auto;
34         top: 0;
35         bottom: 0;
36         left: 0;
37         right: 0;
38         position: absolute;
39     }
40     .container img:nth-child(1){
41         transform: rotateY(0deg) translateZ(350px);
42     }
43     .container img:nth-child(2){
44         transform: rotateY(36deg) translateZ(350px);
45     }
46     .container img:nth-child(3){
47         transform: rotateY(72deg) translateZ(350px);
48     }
49     .container img:nth-child(4){
50         transform: rotateY(108deg) translateZ(350px);
51     }
52     .container img:nth-child(5){
53         transform: rotateY(144deg) translateZ(350px);
54     }
55     .container img:nth-child(6){
56         transform: rotateY(180deg) translateZ(350px);
57     }
58     .container img:nth-child(7){
59         transform: rotateY(216deg) translateZ(350px);
60     }
61     .container img:nth-child(8){
62         transform: rotateY(252deg) translateZ(350px);
63     }
64     .container img:nth-child(9){
65         transform: rotateY(288deg) translateZ(350px);
66     }
67     .container img:nth-child(10){
68         transform: rotateY(324deg) translateZ(350px);
69     }
70 </style>
71 <body>
72     <div class="container">
73         <img src="../Img/1.jpg">
74         <img src="../Img/2.jpg">
75         <img src="../Img/3.jpg">
76         <img src="../Img/4.jpg">
77         <img src="../Img/5.jpg">
78         <img src="../Img/6.jpg">
79         <img src="../Img/7.jpg">
80         <img src="../Img/8.jpg">
81         <img src="../Img/9.jpg">
82         <img src="../Img/10.jpg">
83     </div>
84 </body>
85 </html>

 

posted on 2016-05-08 10:32  辉子t1  阅读(4002)  评论(2)  编辑  收藏  举报

导航