Question

所以我现在尝试了几种不同的方法，我似乎在两个方面都得到了相同的结果。我试图让我的按钮在每次点击时旋转一个3d对象，它只能工作一次。然后我意识到我只是设置一个css属性的值..当我需要在每次点击时增加此属性的值。我们需要增加rotateY的CSS值（-40deg）;每次点击。我怎么能这样做？

Jquery的：

    <script type="text/javascript">
        $(function() {
            $('#nextSlideBtn').on('click', function() {
                $('#carousel-3d').css('transform', 'rotateY( -40deg )');
            });
        });
    </script>

HTML：

    <section class="container" id="carouselWrapper">

        <div id="carousel-3d">
            <figure class="slide1"></figure>
            <figure class="slide2"></figure>
            <figure class="slide3"></figure>
            <figure class="slide4"></figure>
            <figure class="slide5"></figure>
            <figure class="slide6"></figure>
            <figure class="slide7"></figure>
            <figure class="slide8"></figure>
            <figure class="slide9"></figure>
        </div><!-- end carousel-3d -->

        <button class="btn btn-lg btn-primary" type="button">Previous</button>
        <button id="nextSlideBtn" class="btn btn-lg btn-primary" type="button">Next</button>

    </section>

CSS：

#carouselWrapper {
    margin-top: 200px;
    width: 210px;
    height: 140px;
    position: relative;
    perspective: 1000px;
}
#carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}
#carousel-3d figure {
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    border: 2px solid white;
}
#carousel-3d figure:nth-child(1) {
    transform: rotateY( 0deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+1') no-repeat center;
}
#carousel-3d figure:nth-child(2) {
    transform: rotateY( 40deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+2') no-repeat center;
}
#carousel-3d figure:nth-child(3) {
    transform: rotateY( 80deg ) translateZ( 288px );
   background: url('http://placehold.it/350x150&text=Slide+3') no-repeat center;
}
#carousel-3d figure:nth-child(4) {
    transform: rotateY( 1200deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+4') no-repeat center;
}
#carousel-3d figure:nth-child(5) {
    transform: rotateY( 160deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+5') no-repeat center;
}
#carousel-3d figure:nth-child(6) {
    transform: rotateY( 200deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+6') no-repeat center;
}
#carousel-3d figure:nth-child(7) {
    transform: rotateY( 240deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+7') no-repeat center;
}
#carousel-3d figure:nth-child(8) {
    transform: rotateY( 280deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+8') no-repeat center;
}
#carousel-3d figure:nth-child(9) {
    transform: rotateY( 3200deg ) translateZ( 288px );
    background: url('http://placehold.it/350x150&text=Slide+9') no-repeat center;
}
#carouselWrapper > button {
    margin-top: 180px;
}
#carousel-3d {
    transition: transform 1.0s;
}

我会尽快让jsfiddle工作。 Thnx任何帮助！

Answer 1

试试这个：http://jsfiddle.net/jvsw31xe/

$(function() {
    var deg = 0;
    $('#nextSlideBtn').on('click', function() {
        deg = deg - 40;
        $('#carousel-3d').css('transform', 'rotateY( ' + deg + 'deg )');
    });
});

Answer 2

尝试使用Web动画API

Element.animate();

然后你不需要添加类和删除类

最简单的参考：http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36

如何逐步增加css属性的值？

2 个答案: