title: How to incrementally increase the value of a css property every click?
body: <p>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?</p>
  
  <p>Jquery:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(function() {
              $('#nextSlideBtn').on('click', function() {
                  $('#carousel-3d').css('transform', 'rotateY( -40deg )');
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;section class="container" id="carouselWrapper"&gt;
  
          &lt;div id="carousel-3d"&gt;
              &lt;figure class="slide1"&gt;&lt;/figure&gt;
              &lt;figure class="slide2"&gt;&lt;/figure&gt;
              &lt;figure class="slide3"&gt;&lt;/figure&gt;
              &lt;figure class="slide4"&gt;&lt;/figure&gt;
              &lt;figure class="slide5"&gt;&lt;/figure&gt;
              &lt;figure class="slide6"&gt;&lt;/figure&gt;
              &lt;figure class="slide7"&gt;&lt;/figure&gt;
              &lt;figure class="slide8"&gt;&lt;/figure&gt;
              &lt;figure class="slide9"&gt;&lt;/figure&gt;
          &lt;/div&gt;&lt;!-- end carousel-3d --&gt;
  
          &lt;button class="btn btn-lg btn-primary" type="button"&gt;Previous&lt;/button&gt;
          &lt;button id="nextSlideBtn" class="btn btn-lg btn-primary" type="button"&gt;Next&lt;/button&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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&amp;text=Slide+1') no-repeat center;
  }
  #carousel-3d figure:nth-child(2) {
      transform: rotateY( 40deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+2') no-repeat center;
  }
  #carousel-3d figure:nth-child(3) {
      transform: rotateY( 80deg ) translateZ( 288px );
     background: url('http://placehold.it/350x150&amp;text=Slide+3') no-repeat center;
  }
  #carousel-3d figure:nth-child(4) {
      transform: rotateY( 1200deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+4') no-repeat center;
  }
  #carousel-3d figure:nth-child(5) {
      transform: rotateY( 160deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+5') no-repeat center;
  }
  #carousel-3d figure:nth-child(6) {
      transform: rotateY( 200deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+6') no-repeat center;
  }
  #carousel-3d figure:nth-child(7) {
      transform: rotateY( 240deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+7') no-repeat center;
  }
  #carousel-3d figure:nth-child(8) {
      transform: rotateY( 280deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+8') no-repeat center;
  }
  #carousel-3d figure:nth-child(9) {
      transform: rotateY( 3200deg ) translateZ( 288px );
      background: url('http://placehold.it/350x150&amp;text=Slide+9') no-repeat center;
  }
  #carouselWrapper &gt; button {
      margin-top: 180px;
  }
  #carousel-3d {
      transition: transform 1.0s;
  }
  </code></pre>
  
  <p>I'll try to get a jsfiddle working soon. Thnx for any help!</p>