一款利用纯css3实现的360度翻转按钮的实例教程

前端  /  管理员 发布于 7年前   210

　　今天要给大家分享的是由css3实现的翻转360动画按钮。之前已为大家分享了好几款css3按钮，大家可以点击链接进去找一找适合自己的。哈哈。下面先为大家上效果图：

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <ul class="flatflipbuttons">  
2.             <li><a href="https://" title="Search"><span class="icon-search"></span>  
3.             </a><b>Search</b></li>  
4.             <li><a href="https://"><span class="icon-gears"></span></a><b>Gears</b></li>  
5.             <li><a href="https://"><span class="icon-rss"></span></a><b>RSS</b></li>  
6.             <li><a href="https://"><span class="icon-twitter"></span></a><b>Twitter</b></li>  
7.             <li><a href="https://"><span class="icon-rocket"></span></a><b>Rocket</b></li>  
8.         </ul>  
9.         <br />  
10.         <br />  
11.         <ul class="flatflipbuttons second">  
12.             <li><a href="https://"><span>  
13.                 <img src="imgs/rss-heart.png" /></span></a></li>  
14.             <li><a href="https://"><span>  
15.                 <img src="imgs/twitter-heart.png" /></span></a></li>  
16.             <li><a href="https://"><span>  
17.                 <img src="imgs/facebook-heart.png" /></span></a></li>  
18.             <li><a href="https://"><span>  
19.                 <img src="imgs/google-heart.png" /></span></a></li>  
20.             <li><a href="https://"><span>  
21.                 <img src="imgs/stumble-heart.png" /></span></a></li>  
22.         </ul>  

　　css代码：

CSS Code复制内容到剪贴板

1. ul.flatflipbuttons   
2.         {   
3.             margin: 0;   
4.             padding: 0;   
5.             list-style: none;   
6.             -webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */  
7.             -moz-perspective: 10000px;   
8.             perspective: 10000px;   
9.         }   
10.            
11.         ul.flatflipbuttons li   
12.         {   
13.             margin: 0;   
14.             display: inline-block;   
15.             width: 100px; /* dimensions of buttons. */  
16.             height: 100px;   
17.             margin-right: 15px; /* spacing between buttons */  
18.             background: white;   
19.             text-transform: uppercase;   
20.             text-align: center;   
21.         }   
22.            
23.         ul.flatflipbuttons li a   
24.         {   
25.             display: table;   
26.             font: bold 36px Arial; /* font size, pertains to icon fonts specifically */  
27.             width: 100%;   
28.             height: 100%;   
29.             margin-bottom: 4px;   
30.             color: black;   
31.             background: #3B9DD5;   
32.             text-decoration: none;   
33.             outline: none;   
34.             -webkit-transition: all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */  
35.             -moz-transition: all 300ms ease-out;   
36.             transition: all 300ms ease-out;   
37.         }   
38.            
39.         ul.flatflipbuttons li:nth-of-type(1) a   
40.         {   
41.             color: white;   
42.             background: #3B9DD5;   
43.         }   
44.            
45.         ul.flatflipbuttons li:nth-of-type(2) a   
46.         {   
47.             background: #A1CD3A;   
48.         }   
49.            
50.         ul.flatflipbuttons li:nth-of-type(3) a   
51.         {   
52.             background: #80C5EC;   
53.         }   
54.            
55.         ul.flatflipbuttons li:nth-of-type(4) a   
56.         {   
57.             color: white;   
58.             background: #635746;   
59.         }   
60.            
61.         ul.flatflipbuttons li:nth-of-type(5) a   
62.         {   
63.             background: #F2C96D;   
64.         }   
65.            
66.         ul.flatflipbuttons li a span   
67.         {   
68.             -moz-box-sizing: border-box;   
69.             -webkit-box-sizing: border-box;   
70.             box-sizing: border-box;   
71.             display: table-cell;   
72.             vertical-align: middle;   
73.             width: 100%;   
74.             height: 100%;   
75.             -webkit-transition: all 300ms ease-out; /* CSS3 transition. */  
76.             -moz-transition: all 300ms ease-out;   
77.             transition: all 300ms ease-out;   
78.         }   
79.            
80.         ul.flatflipbuttons li b   
81.         {   
82.             /* CSS for text beneath button */  
83.             display: block;   
84.             position: relative;   
85.             width: 100%;   
86.             opacity: 0;   
87.             -webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */  
88.             -moz-transition: all 300ms ease-out 0.2s;   
89.             transition: all 300ms ease-out 0.2s;   
90.         }   
91.            
92.            
93.         ul.flatflipbuttons li a img   
94.         {   
95.             /* CSS for image if defined inside button */  
96.             border-width: 0;   
97.             vertical-align: middle;   
98.         }   
99.            
100.            
101.         ul.flatflipbuttons li:hover a   
102.         {   
103.             -webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/  
104.             -moz-transform: rotateY(180deg);   
105.             transform: rotateY(180deg);   
106.             background: #c1e4ec; /* bgcolor of button onMouseover*/  
107.             -webkit-transition-delay: 0.2s;   
108.             -moz-transition-delay: 0.2s;   
109.             transition-delay: 0.2s;   
110.         }   
111.            
112.         ul.flatflipbuttons li:hover a span   
113.         {   <