Edit in JSFiddle

            YUI().use('event-flick', 'transition', function(Y){
            
                Y.one('#logo').on('flick', function(e){
                    
                    var vel = e.flick.velocity;
                    Y.one('#logo').transition({
                        transform    : 'rotateY(' + (vel > 0 ? Math.ceil(vel) : Math.floor(vel)) * 360 + 'deg)',
                        duration    : Math.max(0.5 / Math.abs(vel), 1),
                        easing        : 'ease-out'
                    }, function(){
                        this.setStyle('webkitTransform', 'rotateY(0deg)');
                    });
                    
                }, { axis: 'x' });
                
            });
        
<div id="logo" style="-webkit-transition-property: -webkit-transform; -webkit-transition-duration: initial; -webkit-transition-timing-function: initial; -webkit-transition-delay: initial; -webkit-transform: rotateY(0deg); "></div>
            body {
                padding: 0 40px 42px 40px;
                font-family: Nobile, "Helvetica Neue", Helvetica, Arial, sans-serif;
                color: #222;
                background: #f9f9f9;
                text-shadow: 0 1px #fff;
                -webkit-transform-origin: 50% 50% 0px;
                -webkit-transform: translate3d(0,0,0);
                -webkit-transform-style: preserve-3d;
                -webkit-perspective: 800;
            }
            
            h1 {
                margin: 1em 0 0 0;
                font-weight: 400;
                color: #999;
            }
                
            p { margin: 0 0 2em 0; }
            
            #logo {
                background: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png) no-repeat;
                width: 512px;
                height: 512px;
                margin: 0 auto;
                -webkit-user-select: none;
                -moz-user-select: none;
            }