CSS3 3D制作实战案例分析

        </div>  
    </div>  
    <div style="margin-left: 700px;margin-top: 100px;">  
        <input id="btn1" type="button" value="向上翻转90度" />  
        <input id="btn2" type="button" name="" value="向左翻转90度" />  
        <input id="btn3" type="button" value="向右翻转90度" />  
        <input id="btn4" type="button" name="" value="向下翻转90度" />  
    </div>  
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>  
    <script>  
        var x=0;   
        var y=0;   
        var box=$("#box");   
        $(‘#btn1’).on("click",function(){   
            var value=90+x*90;   
            box.css("-webkit-transform","rotateX("+value+"deg)");   
            x++;   
        });   
        $(‘#btn2’).on("click",function(){   
            var value=y*90+90;   
            box.css("-webkit-transform","rotateY("+value+"deg)");   
            y++;   
        });   
        $(‘#btn3’).on("click",function(){   
            y–;   
            var value=y*90;   
            box.css("-webkit-transform","rotateX("+value+"deg)");