平滑元素转换为设备方向更改

Question

我正在尝试实现this sort of effect，但是通过使用JS和更改设备方向（使用陀螺仪）。所以我写了这段代码：

var sky, flag, objects, maxPositiveTranslateFar = 30, maxPositiveTranslateNear = 20, maxNegativeTranslateFar=-30, maxNegativeTranslateNear=-20;
document.addEventListener("DOMContentLoaded",onload); 
function onload(){
    sky = document.getElementById('sky');
    flag = document.getElementById('flag');
    objects = [{objectName : sky}, {objectName : flag}];

    if (window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', function(eventData){
            var tiltLR = eventData.gamma;
            var tiltD = eventData.beta;
            deviceOrientationHandler(tiltLR, tiltD);
        }, false);
    } else {
        // Do something
    }
}

function deviceOrientationHandler(tiltLR, tiltD) {
    for(var i = 0; i <= objects.length - 1; i++){
        if(objects[i].objectName == flag){
            if(tiltLR > maxPositiveTranslateNear){
                tiltLR = maxPositiveTranslateNear;
            } else if(tiltLR < maxNegativeTranslateNear) {
                tiltLR = maxNegativeTranslateNear;
            }
            flag.style.webkitTransform = "translateX("+tiltLR+"px)";
        } else {
            if(tiltLR*1.7 > maxPositiveTranslateFar){
                tiltLR = maxPositiveTranslateFar;
            } else if(tiltLR*1.7 < maxNegativeTranslateFar) {
                tiltLR = maxNegativeTranslateFar;
            }
            if(tiltD > maxPositiveTranslateNear){
                tiltD = maxPositiveTranslateNear;
            } else if(tiltD < maxNegativeTranslateNear) {
                tiltD = maxNegativeTranslateNear;
            }
            sky.style.webkitTransform = "translateX("+(tiltLR*1.7)+"px) translateY("+tiltD+"px)";
        }
    }
}

它起作用，天空和旗帜元素相应地移动，但是移动不像上面的例子那样平滑。我想这是因为当设备旋转时值会不断变化，因此deviceorientation事件会持续发射。我尝试将transition添加到这些元素的CSS：

-webkit-transition: -webkit-transform 1s ease-out;

但它只会让事情变得更糟 - 变换真的很糟糕。

有没有人有解决方案如何使这种转变顺利进行？我必须使用普通的JS / CSS，没有外部JS库（或使用库，但它必须非常轻，40-50 kb。是最大的）。