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

                <img src="imgs/facebook-heart.png" /></span></a></li>  
            <li><a href="https://www.jb51.net"><span>  
                <img src="imgs/google-heart.png" /></span></a></li>  
            <li><a href="https://www.jb51.net"><span>  
                <img src="imgs/stumble-heart.png" /></span></a></li>  
        </ul>  

　　css代码：

CSS Code复制内容到剪贴板

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;