CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SuperVeetz
SuperVeetz

Reputation: 2176

How to incrementally increase the value of a css property every click?

So I've tried this a few different ways now and I seem to get the same results in both ways. I'm trying to make my button rotate an 3d-object on every click and it only works 1 time. Then I realized that I am simply setting the value of a css property.. when I need to be incrementing the value of this property on each click. We need to increment the CSS value of rotateY( -40deg ); each click. How can I do this?

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

I'll try to get a jsfiddle working soon. Thnx for any help!

Upvotes: 0

Views: 640

Answers (2)

Edwin Reynoso
Edwin Reynoso

Reputation: 1531

Try using the Web Animation API

Element.animate();

Then you won't need to add classes and remove classes

Simplest reference: http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36

Upvotes: 0

MrMartiniMo
MrMartiniMo

Reputation: 149

try this: http://jsfiddle.net/jvsw31xe/

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

Upvotes: 3

Related Questions