Форумы портала PHP.SU :: Как заставить эту штуку работать в IE 10 и Опере

Здравствуйте, вот собсн такую херню ковыряю _http://www[dot]xiper[dot]net/collect/web-withou[dot][dot][dot]-background[dot]html
В хроме и мозиле работает на ура, а вот в Опере и осле не хочет. Я уже и ЦССник модифицировал, вот мой вариант:

CODE (html):
скопировать код в буфер обмена

#sky {
        height: 184px;
        width: 1000px;
        margin: 0 auto;
        position: relative;
        -moz-perspective: 1000px;                               // глубина сцены
        -webkit-perspective: 1000px;
        -o-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
        overflow: hidden;
        background-image:-moz-linear-gradient(top, #072ac0, #4466f9);
        background-image:-webkit-linear-gradient(top, #072ac0, #4466f9);
        background-image:-o-linear-gradient(top, #072ac0, #4466f9);
        background-image:-ms-linear-gradient(top, #072ac0, #4466f9);
        backround-image: linear-gradient(top, #072ac0, #4466f9);
}
#world {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;                           // объекты поддаются 3d траснформациям
        position: relative;
        height: 1000px;
}
#world>div {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;                           
}
.cloud {
        position: absolute;
}
.cloudLayer {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 109px;           /* размеры не обязательно подстраивать под размеры текстуры */
        height: 120px;
        margin-left: -178px;
        margin-top: -178px;
        -webkit-transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        -ms-transition: opacity .5s ease-out;
        transition: opacity .5s ease-out;
}

CODE (javascript):
скопировать код в буфер обмена

 
(function() {
                var lastTime = 0;
                var vendors = ['ms', 'moz', 'webkit', 'o'];
                for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
                        window.cancelRequestAnimationFrame = window[vendors[x]+
                          'CancelRequestAnimationFrame'];
                }
 
                if (!window.requestAnimationFrame)
                        window.requestAnimationFrame = function(callback, element) {
                                var currTime = new Date().getTime();
                                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                                var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
                                  timeToCall);
                                lastTime = currTime + timeToCall;
                                return id;
                        };
 
                if (!window.cancelAnimationFrame)
                        window.cancelAnimationFrame = function(id) {
                                clearTimeout(id);
                        };
        }())
 
 
        var world = document.getElementById('world'),           // сцена
                arrClouds = [],
                arrCloudLayers = [],
                skyWidth = world.offsetWidth,
                skyHeight = world.offsetHeight;
        
        
function init(){
        
        /* к-во облаков и их расположение подбираем в зависимости от сцены */
        arrClouds.push( createCloud({ 
                posX: -200,
                posY: 0,
                posZ: 0,
                speed: .2,
                layersN: 10,
                texture: '{THEME}/img/cloud-3.png',
                textureSizeX: 256,
                textureSizeY: 256
                })
                        );
                        
        arrClouds.push( createCloud({ 
                posX: 600,
                posY: 100,
                posZ: 0,
                speed: .2,
                layersN: 10,
                texture: '{THEME}/img/cloud-3.png',
                textureSizeX: 256,
                textureSizeY: 256
                })
                        );
                        
        arrClouds.push( createCloud({ 
                posX: 1500,
                posY: -200,
                posZ: 0,
                speed: .2,
                layersN: 10,
                texture: '{THEME}/img/cloud-3.png',
                textureSizeX: 256,
                textureSizeY: 256
                })
                        );
                        
        arrClouds.push( createCloud({ 
                posX: 1000,
                posY: -200,
                posZ: 0,
                speed: .2,
                layersN: 10,
                texture: '{THEME}/img/cloud-3.png',
                textureSizeX: 256,
                textureSizeY: 256
                })
                        );
                        
        animate(); // запускаем анимацию
        
}
 
/*
        создание облака
        posX, posY, posZ        - координаты положения центра облака
        speed                           - скорость перемещения px/sec
        layersN                         - к-во слоев в облаке
        texture                         - путь к текстуре
        textureSizeX/Y          - размеры текстуры      
*/
function createCloud(params)
{
         var cloud = document.createElement( 'div');
         
         cloud.className = 'cloud';
         
        /* сохраняем позицию облака     */
        cloud.data = {
                posX: params.posX,
                posY: params.posY,
                posZ: params.posZ,
                speed: params.speed
        }
        
        world.appendChild( cloud );
        
        var cloudT = 'translateX( ' + cloud.data.posX + 'px ) translateY( ' + cloud.data.posY + 'px ) translateZ( ' + cloud.data.posZ + 'px )';
        cloud.style.webkitTransform = cloudT;
        cloud.style.MozTransform = cloudT;
        cloud.style.oTransform = cloudT;
        cloud.style.msTransform = cloudT;
        
        /* формируем слои облака */
        for( var i = 0; i < params.layersN; i++ ) {
                
                cloudLayer = document.createElement( 'img' );
                        
                cloudLayer.setAttribute( 'src', params.texture );
                cloudLayer.className = 'cloudLayer';
                
                cloudLayer.data = {
                        cloudLayerX: params.textureSizeX - ( Math.random() * params.textureSizeX ),                     // координата X (кучность облака по оси X. чем больше значение, тем кунчость меньше)
                        cloudLayerY: params.textureSizeY - ( Math.random() * params.textureSizeY * 2 ),         // координата Y (кучность по Y)
                        cloudLayerZ: 100 - ( Math.random() * 200 ),                                                                                     // координата Z
                        cloudLayerA: Math.random() * 360,                                                                                                       // начальный угол повоторота
                        cloudLayerAV: ( Math.random() > 0.5 ) ? -0.1*params.speed: 0.1*params.speed,    // направление и скорость вращения
                        cloudLayerS: .9 + Math.random()                                                                                                         // масштаб
                }
                
                var t = 'translateX( ' + cloudLayer.data.cloudLayerX + 'px ) translateY( ' + cloudLayer.data.cloudLayerY + 'px ) translateZ( ' + cloudLayer.data.cloudLayerZ + 'px ) rotateZ( ' + cloudLayer.data.cloudLayerA + 'deg ) scale( ' + cloudLayer.data.cloudLayerS + ' )';
                cloudLayer.style.webkitTransform = t;
                cloudLayer.style.MozTransform = t;
                cloudLayer.style.oTransform = t;
                cloudLayer.style.msTransform = t;
                
                cloud.appendChild( cloudLayer );
                arrCloudLayers.push( cloudLayer );
                
        }
        
        return cloud;
 
}
 
function animate() {
        requestAnimationFrame( animate );
        
        // перемещение облака
        for (  var j = arrClouds.length; j--;)
        {
                var cloud = arrClouds[j];
                        
                if( cloud.data.posX > skyWidth+300 ) cloud.data.posX = -300;
                
                cloud.data.posX += cloud.data.speed;
 
                var cloudT = 'translateX('+ cloud.data.posX +'px )';
                cloud.style.webkitTransform = cloudT;
                cloud.style.MozTransform = cloudT;
                cloud.style.oTransform = cloudT;
                cloud.style.msTransform = cloudT;
        }
        
        // обработка слоев облака
        for( var j = arrCloudLayers.length; j--; ) {
                var layer = arrCloudLayers[ j ];
 
                layer.data.cloudLayerA += layer.data.cloudLayerAV; // Z- поворот
                        
                var t = 'translateX( ' + layer.data.cloudLayerX + 'px ) translateY( ' + layer.data.cloudLayerY + 'px ) translateZ( ' + layer.data.cloudLayerZ + 'px ) rotateZ( ' + layer.data.cloudLayerA + 'deg )';
                layer.style.webkitTransform = t;
                layer.style.MozTransform = t;
                layer.style.oTransform = t;
                layer.style.msTransform = t;
                        
                }
        
}
 
init();
 