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; }