利用css3做出立体折叠效果

忘是亡心i 2022-08-07 11:42 189阅读 0赞

原理介绍：  
这种折叠效果是小编我在一个英文[网站][Link 1]上学的，这个英文网站上的很多特效都很不错，推荐给你们进去看看，这个网站叫codrops  
接下来正式简单介绍一下原理。折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；透视我就不具体介绍了，推荐一篇专门讲解perspective属性的文章——[http://www.zhangxinxu.com/wordpr ... -animate-transition][http_www.zhangxinxu.com_wordpr ... -animate-transition]有了perspective这个属性的知识，再加上css3里面的渐变，我们就可一很轻易的打造各种立体效果了。

[![1031561wi188z30mk5kl5i.png][]][1031561wi188z30mk5kl5i.png]

想要达到图上的折叠立体效果，我们的分析它是怎么用html布局的。从上图中可以看出，一张图片有五个部分，其中有四个部分是立起来的，呈现出立体效果。那么问题来了，要怎么样把一张图片分成五部分呢？其实这个不难，用background-postion定位就可以了，在这里我准备了五个div,每个idiv里的背景图通过定位，恰好能够拼成一张图片，而每部分的宽度都是等宽的，所以在利用background-postion属性时，X的值可以用图片的宽度除以5来确定，这里我用的图片宽度为640px;所以定位时，就有了如下代码：

1.  .view .s1 \{  
    
2.          background-position: 0px 0px;  
    
3.  \}  
    
4.  .view .s2 \{  
    
5.          background-position: -128px 0px;  
    
6.  \}  
    
7.  .view .s3 \{  
    
8.          background-position: -256px 0px;  
    
9.  \}  
    
10. .view .s4 \{  
    
11.         background-position: -384px 0px;  
    
12. \}  
    
13. .view .s5 \{  
    
14.         background-position: -512px 0px;  
    
15. \}

复制代码

完成图片的布局之后，我们就可以给每个切片添加样式了。我选择了其中的四个切片，分别设置了translate3d和rotate3d这两个属性，设置方式可以看我贴的代码，不知道这两个属性怎么用的同学，可以深入研究一下上面推荐的文章。在这些都设置完了之后，你就可以看大折叠的立体效果了，不过有个问题，看起来不那么真实，所以，我又在每个切片的表层设置了一个span空元素，大小与一个切片一样大，并为其设置了linear-gradient线性渐变样式，使其中的一些切片具有阴影和反光效果，这样就更加真实了，具体设置方式可以参照下面的样式代码。  
为了能够达到复用的效果，我将其封装成了一个插件，这样就可以直接[应用][Link 2]到任何一张图片了。最后说一下，这是我第一次在这里发笔记，写的不是很好，望多多包涵，有问题的可以直接回复我，谢谢！  
  
  
下面是图片的切割与布局

1.  <div class="slice s1" style="background-image: url(image.jpg); ">  
    
2.              <span class="overlay"></span>  
    
3.                 
    
4.              <div class="slice s2" style="background-image: url(image.jpg); ">  
    
5.                  <span class="overlay"></span>  
    
6.                     
    
7.                  <div class="slice s3" style="background-image: url(image.jpg); ">  
    
8.                      <span class="overlay"></span>  
    
9.                         
    
10.                     <div class="slice s4" style="background-image: url(image.jpg); ">  
    
11.                         <span class="overlay"></span>  
    
12.                            
    
13.                         <div class="slice s5" style="background-image: url(image.jpg); ">  
    
14.                             <span class="overlay"></span>  
    
15.                         </div>  
    
16.                        
    
17.                    </div>  
    
18.                            
    
19.                </div>  
    
20.                        
    
21.            </div>  
    
22.                    
    
23.        </div>

复制代码

jQuery3D折叠插件代码

1.  $.fn.hoverfold = function( args ) \{  
    
2.    
    
3.      this.each( function() \{  
    
4.         
    
5.          $( this ).children( '.view' ).each( function() \{  
    
6.             
    
7.              var $item   = $( this ),  
    
8.                  img     = $item.children( 'img' ).attr( 'src' ),  
    
9.                  struct  = '<div class="slice s1">';  
    
10.                     struct  +='<div class="slice s2">';  
    
11.                         struct  +='<div class="slice s3">';  
    
12.                             struct  +='<div class="slice s4">';  
    
13.                                 struct  +='<div class="slice s5">';  
    
14.                                 struct  +='</div>';  
    
15.                             struct  +='</div>';  
    
16.                         struct  +='</div>';  
    
17.                     struct  +='</div>';  
    
18.                 struct  +='</div>';  
    
19.                    
    
20.             var $struct = $( struct );  
    
21.                
    
22.             $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );  
    
23.           \});  
    
24.        \});  
    
25.     \};

复制代码

1.  <!doctype html>  
    
2.  <html>  
    
3.  <head>  
    
4.  <meta charset="utf-8">  
    
5.  <title>Show me the Furry Friend of the Day</title>  
    
6.  <script  type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    
7.  <style type="text/css">  
    
8.  \*\{padding:0;margin:0\}  
    
9.  .header\{width:100%;background:\#000;height:50px;margin-bottom:20px;min-width:1000px\}  
    
10. /\*图片折叠效果样式\*/  
    
11. .view\{margin:20px auto;display:block;width:640px;height:400px;border: 8px solid \#fff;background-color: \#EEE;background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));-webkit-perspective: 800px;-moz-perspective: 800px;-o-perspective: 800px;-ms-perspective: 800px;perspective: 800px;position:relative;box-shadow: inset 0 0 0 .2em hsla(0,0%,0%,.1),  
    
12. inset 0 0 2em hsla(0,0%,0%,.05),0 .2em .25em hsla(0,0%,0%,.5);\}  
    
13.   
    
14. .view .slice\{  
    
15.         width:128px;  
    
16.         height: 100%;  
    
17.         z-index: 100;  
    
18.           
    
19.         -webkit-transform-style: preserve-3d;  
    
20.         -moz-transform-style: preserve-3d;  
    
21.         -o-transform-style: preserve-3d;  
    
22.         -ms-transform-style: preserve-3d;  
    
23.         transform-style: preserve-3d;  
    
24.           
    
25.         -webkit-transform-origin: left center;  
    
26.         -moz-transform-origin: left center;  
    
27.         -o-transform-origin: left center;  
    
28.         -ms-transform-origin: left center;  
    
29.         transform-origin: left center;  
    
30.           
    
31.         -webkit-transition: -webkit-transform 150ms ease-in-out;  
    
32.         -moz-transition: -moz-transform 150ms ease-in-out;  
    
33.         -o-transition: -o-transform 150ms ease-in-out;  
    
34.         -ms-transition: -ms-transform 150ms ease-in-out;  
    
35.         transition: transform 150ms ease-in-out;\}  
    
36.   
    
37. .view-back\{  
    
38.         width: 50%;  
    
39.         height: 100%;  
    
40.         position: absolute;  
    
41.         right: 0;  
    
42.         background-color: rgb(0,255,255);  
    
43.         background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));  
    
44.         z-index: 0;  
    
45. \}  
    
46. .view .s2,   
    
47. .view .s3,   
    
48. .view .s4,   
    
49. .view .s5 \{  
    
50.         -webkit-transform: translate3d(128px,0,0);  
    
51.         -moz-transform: translate3d(128px,0,0);  
    
52.         -o-transform: translate3d(128px,0,0);  
    
53.         -ms-transform: translate3d(128px,0,0);  
    
54.         transform: translate3d(128px,0,0);  
    
55. \}  
    
56. /\*为每个切片设置背景图片位置\*/  
    
57. .view .s1 \{  
    
58.         background-position: 0px 0px;  
    
59. \}  
    
60. .view .s2 \{  
    
61.         background-position: -128px 0px;  
    
62. \}  
    
63. .view .s3 \{  
    
64.         background-position: -256px 0px;  
    
65. \}  
    
66. .view .s4 \{  
    
67.         background-position: -384px 0px;  
    
68. \}  
    
69. .view .s5 \{  
    
70.         background-position: -512px 0px;  
    
71. \}  
    
72.   
    
73. .view .overlay \{  
    
74.         width: 128px;  
    
75.         height: 100%;  
    
76.         opacity: 0;  
    
77.         position: absolute;  
    
78.         -webkit-transition: opacity 150ms ease-in-out;  
    
79.         -moz-transition: opacity 150ms ease-in-out;  
    
80.         -o-transition: opacity 150ms ease-in-out;  
    
81.         -ms-transition: opacity 150ms ease-in-out;  
    
82.         transition: opacity 150ms ease-in-out;  
    
83. \}  
    
84. .view:hover .overlay \{  
    
85.         opacity: 1;  
    
86. \}  
    
87.   
    
88. .view img \{  
    
89.         position: absolute;  
    
90.         z-index: 0;  
    
91.         -webkit-transition: left 0.3s ease-in-out;  
    
92.         -o-transition: left 0.3s ease-in-out;  
    
93.         -moz-transition: left 0.3s ease-in-out;  
    
94.         -ms-transition: left 0.3s ease-in-out;  
    
95.         transition: left 0.3s ease-in-out;  
    
96. \}  
    
97. .view:hover .s2\{  
    
98.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);  
    
99.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);  
    
100.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);  
    
101.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);  
    
102.         transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);  
    
103. \}  
    
104. .view:hover .s3,   
    
105. .view:hover .s5\{  
    
106.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);  
    
107.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);  
    
108.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);  
    
109.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);  
    
110.         transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);  
    
111. \}  
    
112. .view:hover .s4\{  
    
113.         -webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);  
    
114.         -moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);  
    
115.         -o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);  
    
116.         -ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);  
    
117.         transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);  
    
118. \}  
    
119. /\*为每个切片创建渐变效果\*/  
    
120. .view .s1 > .overlay \{  
    
121.         background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);  
    
122.         background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);  
    
123.         background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);  
    
124.         background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);  
    
125.         background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);  
    
126. \}  
    
127.   
    
128. .view .s2 > .overlay \{  
    
129.         background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);  
    
130.         background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);  
    
131.         background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);  
    
132.         background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);  
    
133.         background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);  
    
134. \}  
    
135.   
    
136. .view .s3 > .overlay \{  
    
137.         background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);  
    
138.         background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);  
    
139.         background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);  
    
140.         background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);  
    
141.         background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);  
    
142. \}  
    
143.   
    
144. .view .s4 > .overlay \{  
    
145.         background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);  
    
146.         background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);  
    
147.         background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);  
    
148.         background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);  
    
149.         background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);  
    
150. \}  
    
151.   
    
152. .view .s5 > .overlay \{  
    
153.         background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);  
    
154.         background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);  
    
155.         background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);  
    
156.         background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);  
    
157.         background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);  
    
158. \}  
    
159.   
    
160. </style>  
    
161. </head>  
    
162. <body  style="background:url(data/attachment/album/201410/21/205405b2dzgtxt2stq27d7.jpg);min-width:1000px">  
    
163. <header class="header"></header>  
    
164. <div id="grid">  
    
165.     <div class="view">  
    
166.         <div class="view-back">  
    
167.             <span style="font:32px 'Microsoft YaHei';position:absolute;right:20px;text-shadow: 2px 2px .3em rgba(255, 255, 255, .6);color:\#FFF">HIT FM</span>  
    
168.             <span style="font:18px 'Microsoft YaHei';position:absolute;right:5px;top:50px;text-shadow: 1px 1px .3em rgba(0, 0, 0, .8);">NEVER <br/>STOP THE BEAT!</span>  
    
169.         </div>  
    
170.         <img src="data/attachment/album/201410/21/205406wfuvvuowv1yhdvdv.jpg" />   
    
171.     </div>  
    
172. <script type="text/javascript">  
    
173. //jquery插件代码                   
    
174. $.fn.hoverfold = function( args ) \{  
    
175.   
    
176.     this.each( function() \{  
    
177.        
    
178.         $( this ).children( '.view' ).each( function() \{  
    
179.            
    
180.             var $item   = $( this ),  
    
181.                 img     = $item.children( 'img' ).attr( 'src' ),  
    
182.                 struct  = '<div class="slice s1">';  
    
183.                     struct  +='<div class="slice s2">';  
    
184.                         struct  +='<div class="slice s3">';  
    
185.                             struct  +='<div class="slice s4">';  
    
186.                                 struct  +='<div class="slice s5">';  
    
187.                                 struct  +='</div>';  
    
188.                             struct  +='</div>';  
    
189.                         struct  +='</div>';  
    
190.                     struct  +='</div>';  
    
191.                 struct  +='</div>';  
    
192.                    
    
193.             var $struct = $( struct );  
    
194.                
    
195.             $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );  
    
196.           \});  
    
197.        \});  
    
198.     \};  
    
199. //调用插件  
    
200. $( '\#grid' ).hoverfold();  
    
201. </script>  
    
202. </div>  
    
203. </body>  
    
204. </html>

复制代码

via:[http://www.w3cfuns.com/blog-5452961-5401334.html][http_www.w3cfuns.com_blog-5452961-5401334.html]

[Link 1]: http://www.html5cn.org/
[http_www.zhangxinxu.com_wordpr ... -animate-transition]: http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition
[1031561wi188z30mk5kl5i.png]: http://www.html5cn.org/data/attachment/forum/201411/14/1031561wi188z30mk5kl5i.png
[Link 2]: http://www.html5cn.org/portal.php?mod=list&catid=20
[http_www.w3cfuns.com_blog-5452961-5401334.html]: http://www.w3cfuns.com/blog-5452961-5401334.html