平武建站

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

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

创新互联专注于企业营销型网站、网站重做改版、大洼网站定制设计、自适应品牌网站建设、H5开发、商城网站定制开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为大洼等各大城市提供网站开发制作服务。

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

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

下面是实现的代码。

html代码：

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

  1.   

  2.             

  3.   

  4.             Search

    5.   

  5.             

  6. Gears
    7.   

  7.             

  8. RSS
    9.   

  9.             

  10. Twitter
    11.   

  11.             

  12. Rocket
    13.   

  13.           

  14.           

  15.           

  16.           

  17.             

  18.   

  19.                 

    20.   

  20.             

  21.   

  22.                 

    23.   

  23.             

  24.   

  25.                 

    26.   

  26.             

  27.   

  28.                 

    29.   

  29.             

  30.   

  31.                 

    32.   

  32.           

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

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

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


标题名称：如何利用纯css3实现360度翻转的按钮
URL链接：http://pwwzsj.com/article/gshpjs.html

其他资讯