今天要给大家分享的是由css3实现的翻转360动画按钮。之前已为大家分享了好几款css3按钮，大家可以点击链接进去找一找适合自己的。哈哈。下面先为大家上效果图：
下面是实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <ulclass="flatflipbuttons"> <li><ahref="http://www.jb51.net"title="Search"><spanclass="icon-search"></span> </a><b>Search</b></li> <li><ahref="http://www.jb51.net"><spanclass="icon-gears"></span></a><b>Gears</b></li> <li><ahref="http://www.jb51.net"><spanclass="icon-rss"></span></a><b>RSS</b></li> <li><ahref="http://www.jb51.net"><spanclass="icon-twitter"></span></a><b>Twitter</b></li> <li><ahref="http://www.jb51.net"><spanclass="icon-rocket"></span></a><b>Rocket</b></li> </ul> <br/> <br/> <ulclass="flatflipbuttonssecond"> <li><ahref="http://www.jb51.net"><span> <imgsrc="imgs/rss-heart.png"/></span></a></li> <li><ahref="http://www.jb51.net"><span> <imgsrc="imgs/twitter-heart.png"/></span></a></li> <li><ahref="http://www.jb51.net"><span> <imgsrc="imgs/facebook-heart.png"/></span></a></li> <li><ahref="http://www.jb51.net"><span> <imgsrc="imgs/google-heart.png"/></span></a></li> <li><ahref="http://www.jb51.net"><span> <imgsrc="imgs/stumble-heart.png"/></span></a></li> </ul>
css代码：
CSS Code复制内容到剪贴板 ul.flatflipbuttons { margin:0; padding:0; list-style:none; -webkit-perspective:10000px;/*largerthevalue,thelesspronouncedthe3Deffect*/ -moz-perspective:10000px; perspective:10000px; } ul.flatflipbuttonsli { margin:0; display:inline-block; width:100px;/*dimensionsofbuttons.*/ height:100px; margin-right:15px;/*spacingbetweenbuttons*/ background:white; text-transform:uppercase; text-align:center; } ul.flatflipbuttonslia { display:table; font:bold36pxArial;/*fontsize,pertainstoiconfontsspecifically*/ width:100%; height:100%; margin-bottom:4px; color:black; background:#3B9DD5; text-decoration:none; outline:none; -webkit-transition:all300msease-out;/*CSS3transition.Lastvalueispausebeforetransitionplay*/ -moz-transition:all300msease-out; transition:all300msease-out; } ul.flatflipbuttonsli:nth-of-type(1)a { color:white; background:#3B9DD5; } ul.flatflipbuttonsli:nth-of-type(2)a { background:#A1CD3A; } ul.flatflipbuttonsli:nth-of-type(3)a { background:#80C5EC; } ul.flatflipbuttonsli:nth-of-type(4)a { color:white; background:#635746; } ul.flatflipbuttonsli:nth-of-type(5)a { background:#F2C96D; } ul.flatflipbuttonsliaspan { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display:table-cell; vertical-align:middle; width:100%; height:100%; -webkit-transition:all300msease-out;/*CSS3transition.*/ -moz-transition:all300msease-out; transition:all300msease-out; } ul.flatflipbuttonslib { /*CSSfortextbeneathbutton*/ display:block; position:relative; width:100%; opacity:0; -webkit-transition:all300msease-out0.2s;/*CSS3transition.0.2sdelay*/ -moz-transition:all300msease-out0.2s; transition:all300msease-out0.2s; } ul.flatflipbuttonsliaimg { /*CSSforimageifdefinedinsidebutton*/ border-width:0; vertical-align:middle; } ul.flatflipbuttonsli:hovera { -webkit-transform:rotateY(180deg);/*fliphorizontally180deg*/ -moz-transform:rotateY(180deg); transform:rotateY(180deg); background:#c1e4ec;/*bgcolorofbuttononMouseover*/ -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s; } ul.flatflipbuttonsli:hoveraspan { color:black;/*coloroficonfontonMouseover*/ -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg);/*fliphorizontally180deg*/ transform:rotateY(180deg); -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s; } ul.flatflipbuttonsli:hoverb { opacity:1; } /*CSSfor2ndmenubelowspecifically*/ ul.secondlia { background:#eee!important; } ul.secondlia:hover { background:#ddd!important; }
以上就是利用css3实现的翻转360动画按钮的代码教程，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。