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

            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;