一款如何利用纯css3如何实现的360度翻转按钮的实例好代码教程

网络
别总是抱怨生活不够幸运，是你欠生活一份努力。未来美不美，取决于你现在拼不拼！

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

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <ulclass="flatflipbuttons">
  2. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"title="Search"><spanclass="icon-search"></span>
  3. </a><b>Search</b></li>
  4. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-gears"></span></a><b>Gears</b></li>
  5. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rss"></span></a><b>RSS</b></li>
  6. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-twitter"></span></a><b>Twitter</b></li>
  7. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rocket"></span></a><b>Rocket</b></li>
  8. </ul>
  9. <br/>
  10. <br/>
  11. <ulclass="flatflipbuttonssecond">
  12. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  13. <imgsrc="imgs/rss-heart.png"/></span></a></li>
  14. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  15. <imgsrc="imgs/twitter-heart.png"/></span></a></li>
  16. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  17. <imgsrc="imgs/facebook-heart.png"/></span></a></li>
  18. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  19. <imgsrc="imgs/google-heart.png"/></span></a></li>
  20. <li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><span>
  21. <imgsrc="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;/*largerthevalue,thelesspronouncedthe3Deffect*/
  7. -moz-perspective:10000px;
  8. perspective:10000px;
  9. }
  11. ul.flatflipbuttonsli
  12. {
  13. margin:0;
  14. display:inline-block;
  15. width:100px;/*dimensionsofbuttons.*/
  16. height:100px;
  17. margin-right:15px;/*spacingbetweenbuttons*/
  18. background:white;
  19. text-transform:uppercase;
  20. text-align:center;
  21. }
  23. ul.flatflipbuttonslia
  24. {
  25. display:table;
  26. font:bold36pxArial;/*fontsize,pertainstoiconfontsspecifically*/
  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:all300msease-out;/*CSS3transition.Lastvalueispausebeforetransitionplay*/
  35. -moz-transition:all300msease-out;
  36. transition:all300msease-out;
  37. }
  39. ul.flatflipbuttonsli:nth-of-type(1)a
  40. {
  41. color:white;
  42. background:#3B9DD5;
  43. }
  45. ul.flatflipbuttonsli:nth-of-type(2)a
  46. {
  47. background:#A1CD3A;
  48. }
  50. ul.flatflipbuttonsli:nth-of-type(3)a
  51. {
  52. background:#80C5EC;
  53. }
  55. ul.flatflipbuttonsli:nth-of-type(4)a
  56. {
  57. color:white;
  58. background:#635746;
  59. }
  61. ul.flatflipbuttonsli:nth-of-type(5)a
  62. {
  63. background:#F2C96D;
  64. }
  66. ul.flatflipbuttonsliaspan
  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:all300msease-out;/*CSS3transition.*/
  76. -moz-transition:all300msease-out;
  77. transition:all300msease-out;
  78. }
  80. ul.flatflipbuttonslib
  81. {
  82. /*CSSfortextbeneathbutton*/
  83. display:block;
  84. position:relative;
  85. width:100%;
  86. opacity:0;
  87. -webkit-transition:all300msease-out0.2s;/*CSS3transition.0.2sdelay*/
  88. -moz-transition:all300msease-out0.2s;
  89. transition:all300msease-out0.2s;
  90. }
  93. ul.flatflipbuttonsliaimg
  94. {
  95. /*CSSforimageifdefinedinsidebutton*/
  96. border-width:0;
  97. vertical-align:middle;
  98. }
  101. ul.flatflipbuttonsli:hovera
  102. {
  103. -webkit-transform:rotateY(180deg);/*fliphorizontally180deg*/
  104. -moz-transform:rotateY(180deg);
  105. transform:rotateY(180deg);
  106. background:#c1e4ec;/*bgcolorofbuttononMouseover*/
  107. -webkit-transition-delay:0.2s;
  108. -moz-transition-delay:0.2s;
  109. transition-delay:0.2s;
  110. }
  112. ul.flatflipbuttonsli:hoveraspan
  113. {
  114. color:black;/*coloroficonfontonMouseover*/
  115. -webkit-transform:rotateY(180deg);
  116. -moz-transform:rotateY(180deg);/*fliphorizontally180deg*/
  117. transform:rotateY(180deg);
  118. -webkit-transition-delay:0.2s;
  119. -moz-transition-delay:0.2s;
  120. transition-delay:0.2s;
  121. }
  124. ul.flatflipbuttonsli:hoverb
  125. {
  126. opacity:1;
  127. }
  129. /*CSSfor2ndmenubelowspecifically*/
  131. ul.secondlia
  132. {
  133. background:#eee!important;
  134. }
  136. ul.secondlia:hover
  137. {
  138. background:#ddd!important;
  139. }

以上就是利用css3实现的翻转360动画按钮的代码好代码教程，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例