一款利用纯css3实现的360度翻转按钮的实例教程

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

　　下面是实现的代码。

　　html代码：

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

<ulclass="flatflipbuttons">

</a>Search</li>

<li><ahref="https://www.jb51.net"><spanclass="icon-gears"></a>Gears</li>

<li><ahref="https://www.jb51.net"><spanclass="icon-twitter"></a>Twitter</li>

<li><ahref="https://www.jb51.net"><spanclass="icon-rocket"></a>Rocket</li>

</ul>

<ulclass="flatflipbuttonssecond">

<imgsrc="imgs/rss-heart.png"/></a></li>

<imgsrc="imgs/twitter-heart.png"/></a></li>

<imgsrc="imgs/facebook-heart.png"/></a></li>

<imgsrc="imgs/google-heart.png"/></a></li>

<imgsrc="imgs/stumble-heart.png"/></a></li>

</ul>

　　css代码：

CSS Code复制内容到剪贴板

ul.flatflipbuttons

{

margin:0;

padding:0;

list-style:none;

-webkit-perspective:10000px;

-moz-perspective:10000px;

perspective:10000px;

}

ul.flatflipbuttonsli

{

margin:0;

display:inline-block;

width:100px;

height:100px;

margin-right:15px;

background:white;

text-transform:uppercase;

text-align:center;

}

ul.flatflipbuttonslia

{

display:table;

font:bold36pxArial;

width:100%;

height:100%;

margin-bottom:4px;

color:black;

background:#3B9DD5;

text-decoration:none;

outline:none;

-webkit-transition:all300msease-out;

-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;

-moz-transition:all300msease-out;

transition:all300msease-out;

}

ul.flatflipbuttonslib

{

display:block;

position:relative;

width:100%;

opacity:0;

-webkit-transition:all300msease-out0.2s;

-moz-transition:all300msease-out0.2s;

transition:all300msease-out0.2s;

}

ul.flatflipbuttonsliaimg

{

border-width:0;

vertical-align:middle;

}

ul.flatflipbuttonsli:hovera

{

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

transform:rotateY(180deg);

background:#c1e4ec;

-webkit-transition-delay:0.2s;

-moz-transition-delay:0.2s;

transition-delay:0.2s;

}

ul.flatflipbuttonsli:hoveraspan

{

color:black;

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

transform:rotateY(180deg);

-webkit-transition-delay:0.2s;

-moz-transition-delay:0.2s;

transition-delay:0.2s;

}

ul.flatflipbuttonsli:hoverb

{

opacity:1;

}

ul.secondlia

{

background:#eee!important;

}

ul.secondlia:hover

{

background:#ddd!important;

}

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

相关文章

最新文章

热门文章

猜你喜欢