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

发布时间：2023-01-18 23:16:35 来源：网络

.

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

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

　　下面是实现的代码。

　　html代码：

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

<ulclass="flatflipbuttons">
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"title="Search"><spanclass="icon-search">
</a>Search</li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-gears"></a>Gears</li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rss"></a>RSS</li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-twitter"></a>Twitter</li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"><spanclass="icon-rocket"></a>Rocket</li>
</ul>
<ulclass="flatflipbuttonssecond">
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com">
<imgsrc="imgs/rss-heart.png"/></a></li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com">
<imgsrc="imgs/twitter-heart.png"/></a></li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com">
<imgsrc="imgs/facebook-heart.png"/></a></li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com">
<imgsrc="imgs/google-heart.png"/></a></li>
<li><arel="nofollow noopener noreferrer" href="https://www.haodaima.com">
<imgsrc="imgs/stumble-heart.png"/></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;
}