如何利用純css3實(shí)現(xiàn)360度翻轉(zhuǎn)的按鈕

這篇文章主要介紹“如何利用純css3實(shí)現(xiàn)360度翻轉(zhuǎn)的按鈕”，在日常操作中，相信很多人在如何利用純css3實(shí)現(xiàn)360度翻轉(zhuǎn)的按鈕問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何利用純css3實(shí)現(xiàn)360度翻轉(zhuǎn)的按鈕”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　今天要給大家分享的是由css3實(shí)現(xiàn)的翻轉(zhuǎn)360動(dòng)畫按鈕。之前已為大家分享了好幾款css3按鈕，大家可以點(diǎn)擊鏈接進(jìn)去找一找適合自己的。哈哈。下面先為大家上效果圖：

　　下面是實(shí)現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <ul class="flatflipbuttons">  

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

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

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

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

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

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

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

14.             <li><a href="http://www.kemok4.com"><span>  

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

16.             <li><a href="http://www.kemok4.com"><span>  

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

18.             <li><a href="http://www.kemok4.com"><span>  

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

20.             <li><a href="http://www.kemok4.com"><span>  

21.                 <img src="imgs/stumble-heart.png" /></span></a></li>  

22.         </ul>  

　　css代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

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

114.             color: black; /* color of icon font onMouseover */  

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

116.             -moz-transform: rotateY(180deg); /* flip horizontally 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.         /* CSS for 2nd menu below specifically */  

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

到此，關(guān)于“如何利用純css3實(shí)現(xiàn)360度翻轉(zhuǎn)的按鈕”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！