Question

我有一个旋转木马，需要在IE中的3D空间中进行动画制作。所以我在每个子元素上链接转换以实现这一点并且它可以工作......但只是部分。

我用来旋转各个div的jQuery调用将覆盖当前的内联样式，其中一个是translateZ。所以我将translateZ与变换rotateY一起放入函数中，但现在jQuery决定做一个或另一个而不是两者。

这是我的代码......

    carouselAnimate = function () {
    var angle = $('.carousel').data('angle');
    var translate = $('.carousel').data('translate');
    var rotation = 0;
    var count = 0;
    $(".carouselImgs").each(function() {
        if(count === 0){
            rotation = 0;
        }else{
            rotation = rotation + angle;
        }
        var nxtStep = rotation + angle;
        $(this).css({
            transform: 'rotateY(' + nxtStep +'deg)' + 'translateZ(' + translate +'px)'

        });
        count++; 
    });
};

<div class="carousel" data-angle="<?php echo $imgArray[0]["angle"]; ?>" data-translate="<?php echo $imgArray[0]["translateZ"]; ?>">
 <?php foreach ($imgArray as $img) : ?>
                <div class="carouselImgs" style="transform: rotateY(<?php echo $img["rotateY"]; ?>) translateZ(<?php echo $img["translateZ"]; ?>); 
                     -webkit-transform: rotateY(<?php echo $img["rotateY"]; ?>) translateZ(<?php echo $img["translateZ"]; ?>);">
                    <img src="<?php echo $img["img"]; ?>"/>
                </div>
 <?php endforeach; ?>
</div>

现在我当然还需要把它变成一个动画，但我后来会担心，首先我只需要同时使用rotateY和translateZ来触发，因为再次......到目前为止jQuery只会运行一个他们然后覆盖已经存在的东西。

jQuery只执行一次CSS转换

0 个答案: