一款利用純css3實現(xiàn)的360度翻轉(zhuǎn)按鈕的實例教程
發(fā)布時間：2014-11-05 12:00:08 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了利用純css3實現(xiàn)的翻轉(zhuǎn)360動畫按鈕的方法，代碼簡單易懂，實現(xiàn)出來的效果卻很美觀，需要的朋友可以過來復制代碼，順便學習一下
今天要給大家分享的是由css3實現(xiàn)的翻轉(zhuǎn)360動畫按鈕。之前已為大家分享了好幾款css3按鈕，大家可以點擊鏈接進去找一找適合自己的。哈哈。下面先為大家上效果圖：
下面是實現(xiàn)的代碼。
html代碼：
XML/HTML Code復制內(nèi)容到剪貼板
- <ul class="flatflipbuttons">
- <li><a href="http://www.dhdzp.com" title="Search"><span class="icon-search"></span>
- </a><b>Search</b></li>
- <li><a href="http://www.dhdzp.com"><span class="icon-gears"></span></a><b>Gears</b></li>
- <li><a href="http://www.dhdzp.com"><span class="icon-rss"></span></a><b>RSS</b></li>
- <li><a href="http://www.dhdzp.com"><span class="icon-twitter"></span></a><b>Twitter</b></li>
- <li><a href="http://www.dhdzp.com"><span class="icon-rocket"></span></a><b>Rocket</b></li>
- </ul>
- <br />
- <br />
- <ul class="flatflipbuttons second">
- <li><a href="http://www.dhdzp.com"><span>
- <img src="imgs/rss-heart.png" /></span></a></li>
- <li><a href="http://www.dhdzp.com"><span>
- <img src="imgs/twitter-heart.png" /></span></a></li>
- <li><a href="http://www.dhdzp.com"><span>
- <img src="imgs/facebook-heart.png" /></span></a></li>
- <li><a href="http://www.dhdzp.com"><span>
- <img src="imgs/google-heart.png" /></span></a></li>
- <li><a href="http://www.dhdzp.com"><span>
- <img src="imgs/stumble-heart.png" /></span></a></li>
- </ul>
css代碼：
CSS Code復制內(nèi)容到剪貼板
- ul.flatflipbuttons
- {
- margin: 0;
- padding: 0;
- list-style: none;
- -webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
- -moz-perspective: 10000px;
- perspective: 10000px;
- }
- ul.flatflipbuttons li
- {
- margin: 0;
- display: inline-block;
- width: 100px; /* dimensions of buttons. */
- height: 100px;
- margin-right: 15px; /* spacing between buttons */
- background: white;
- text-transform: uppercase;
- text-align: center;
- }
- ul.flatflipbuttons li a
- {
- display: table;
- font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
- width: 100%;
- height: 100%;
- margin-bottom: 4px;
- color: black;
- background: #3B9DD5;
- text-decoration: none;
- outline: none;
- -webkit-transition: all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
- -moz-transition: all 300ms ease-out;
- transition: all 300ms ease-out;
- }
- ul.flatflipbuttons li:nth-of-type(1) a
- {
- color: white;
- background: #3B9DD5;
- }
- ul.flatflipbuttons li:nth-of-type(2) a
- {
- background: #A1CD3A;
- }
- ul.flatflipbuttons li:nth-of-type(3) a
- {
- background: #80C5EC;
- }
- ul.flatflipbuttons li:nth-of-type(4) a
- {
- color: white;
- background: #635746;
- }
- ul.flatflipbuttons li:nth-of-type(5) a
- {
- background: #F2C96D;
- }
- ul.flatflipbuttons li a span
- {
- -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: all 300ms ease-out; /* CSS3 transition. */
- -moz-transition: all 300ms ease-out;
- transition: all 300ms ease-out;
- }
- ul.flatflipbuttons li b
- {
- /* CSS for text beneath button */
- display: block;
- position: relative;
- width: 100%;
- opacity: 0;
- -webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
- -moz-transition: all 300ms ease-out 0.2s;
- transition: all 300ms ease-out 0.2s;
- }
- ul.flatflipbuttons li a img
- {
- /* CSS for image if defined inside button */
- border-width: 0;
- vertical-align: middle;
- }
- ul.flatflipbuttons li:hover a
- {
- -webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
- -moz-transform: rotateY(180deg);
- transform: rotateY(180deg);
- background: #c1e4ec; /* bgcolor of button onMouseover*/
- -webkit-transition-delay: 0.2s;
- -moz-transition-delay: 0.2s;
- transition-delay: 0.2s;
- }
- ul.flatflipbuttons li:hover a span
- {
- color: black; /* color of icon font onMouseover */
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
- transform: rotateY(180deg);
- -webkit-transition-delay: 0.2s;
- -moz-transition-delay: 0.2s;
- transition-delay: 0.2s;
- }
- ul.flatflipbuttons li:hover b
- {
- opacity: 1;
- }
- /* CSS for 2nd menu below specifically */
- ul.second li a
- {
- background: #eee !important;
- }
- ul.second li a:hover
- {
- background: #ddd !important;
- }
以上就是利用css3實現(xiàn)的翻轉(zhuǎn)360動畫按鈕的代碼教程，謝謝閱讀，希望能幫到大家，請繼續(xù)關(guān)注腳本之家，我們會努力分享更多優(yōu)秀的文章。
相關(guān)文章
- 這篇文章給大家分享的是利用純css實現(xiàn)圖片翻轉(zhuǎn)效果，對大家的學習使用CSS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。2016-10-09
一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程，css3使我們能夠跳出2d空間，實現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31- 這篇文章主要介紹了css3實現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23
- 這篇文章主要為大家介紹了利用CSS中的濾鏡效果實現(xiàn)漸變翻轉(zhuǎn)效果的代碼，不會的朋友可以和腳本之家的小編一起學習一下，以后想要實現(xiàn)漸變翻轉(zhuǎn)效果就不難啦2014-10-09
純CSS實現(xiàn)菜單、導航欄的3D翻轉(zhuǎn)動畫效果
隨著瀏覽器技術(shù)的進步，CSS動畫技術(shù)已經(jīng)不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強大的事情2014-04-23css控制列表與導航的制作(水平導航條、垂直翻轉(zhuǎn)的列表、垂直導航欄、內(nèi)
這篇文章主要介紹了css控制列表與導航的制作,包括水平導航條、垂直翻轉(zhuǎn)的列表、垂直導航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15- 這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應用,需要的朋友可以參考下2014-04-08
CSS圖片翻轉(zhuǎn)動畫技術(shù)詳解（IE也實現(xiàn)了）
因為不斷有人問我，現(xiàn)在我補充一下：IE是支持這種技術(shù)的！盡管會很麻煩。需要做的是旋轉(zhuǎn)front和back元素，而不是旋轉(zhuǎn)整個容器元素。如果你使用的是最新版的IE，可以忽略這2014-04-03- css 2.0還是沒有翻轉(zhuǎn)的，3.0里面有rotate屬性，這個可以把元素進行任意角度旋轉(zhuǎn)，灰常強大，下面有個不錯的示例，大家可以參考下2014-02-27
CSS Cookbook 創(chuàng)建文字導航菜單和翻轉(zhuǎn)特效
CSS Cookbook例子 創(chuàng)建文字導航菜單和翻轉(zhuǎn)特效2009-12-15