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

           
        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*/