如何利用纯css3实现360度翻转的按钮

这篇文章主要介绍“如何利用纯css3实现360度翻转的按钮”，在日常操作中，相信很多人在如何利用纯CSS3实现360度翻转的按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何利用纯css3实现360度翻转的按钮”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

　　下面是实现的代码。

　　html代码：

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

1. <ul class="flatflipbuttons">  

2.             <li><a href="https://www.yisu.com" title="Search"><span class="icon-search"></span>  

3.             </a><b>Search</b></li>  

4.             <li><a href="Https://www.yisu.com"><span class="icon-gears"></span></a><b>Gears</b></li>  

5.             <li><a href="https://www.yisu.com"><span class="icon-rss"></span></a><b>RSS</b></li>  

6.             <li><a href="https://www.yisu.com"><span class="icon-twitter"></span></a><b>Twitter</b></li>  

7.             <li><a href="https://www.yisu.com"><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://www.yisu.com"><span>  

13.                 <img src="imgs/rss-heart.png" /></span></a></li>  

14.             <li><a href="https://www.yisu.com"><span>  

15.                 <img src="imgs/twitter-heart.png" /></span></a></li>  

16.             <li><a href="https://www.yisu.com"><span>  

17.                 <img src="imgs/facebook-heart.png" /></span></a></li>  

18.             <li><a href="https://www.yisu.com"><span>  

19.                 <img src="imgs/Google-heart.png" /></span></a></li>  

20.             <li><a href="https://www.yisu.com"><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;   

7.             -moz-perspective: 10000px;   

8.             perspective: 10000px;   

9.         }   

10.            

11.         ul.flatflipbuttons li   

12.         {   

13.             margin: 0;   

14.             display: inline-block;   

15.             width: 100px;   

16.             height: 100px;   

17.             margin-right: 15px;   

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;   

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;   

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;   

76.             -moz-transition: all 300ms ease-out;   

77.             transition: all 300ms ease-out;   

78.         }   

79.            

80.         ul.flatflipbuttons li b   

81.         {   

82.               

83.             display: block;   

84.             position: relative;   

85.             width: 100%;   

86.             opacity: 0;   

87.             -webkit-transition: all 300ms ease-out 0.2s;   

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.               

96.             border-width: 0;   

97.             vertical-align: middle;   

98.         }   

99.            

100.            

101.         ul.flatflipbuttons li:hover a   

102.         {   

103.             -webkit-transform: rotateY(180deg);   

104.             -moz-transform: rotateY(180deg);   

105.             transform: rotateY(180deg);   

106.             background: #c1e4ec;   

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.         {   

114.             color: black;   

115.             -webkit-transform: rotateY(180deg);   

116.             -moz-transform: rotateY(180deg);   

117.             transform: rotateY(180deg);   

118.             -webkit-transition-delay: 0.2s;   

119.             -moz-transition-delay: 0.2s;   

120.             transition-delay: 0.2s;   

121.         }   

122.            

123.            

124.         ul.flatflipbuttons li:hover b   

125.         {   

126.             opacity: 1;   

127.         }   

128.            

129.           

130.            

131.         ul.second li a   

132.         {   

133.             background: #eee !important;   

134.         }   

135.            

136.         ul.second li a:hover   

137.         {   

138.             background: #DDD !important;   

139.         }  

到此，关于“如何利用纯css3实现360度翻转的按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！