title: Controlling CSS Transform with an external button?
body: <p>Need help with a javascript on a button to trigger these transformations like a slider 1,2,3 and alternate back and forth. Like on the apple website for iPhone features slider. Anyone?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="anima-slide1"&gt;
    &lt;div class="anima-text-slide1"&gt;Genuinity comes at a price.&lt;br&gt;
      &lt;font color="#f06"&gt;Will you pay it?&lt;/font&gt;&lt;/div&gt;
    &lt;div class="anima-image-slide1"&gt;&lt;img src="img/lowrider1.png" width="250" height="250"&gt; &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="anima-slide2"&gt;
    &lt;div class="anima-text-slide2"&gt;Genuinity comes at a price.&lt;br&gt;
      &lt;font color="#f06"&gt;Will you pay it?&lt;/font&gt;&lt;/div&gt;
    &lt;div class="anima-image-slide2"&gt;&lt;img src="img/lowrider1.png" width="250" height="250"&gt; &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="anima-slide3"&gt;
    &lt;div class="anima-text-slide3"&gt;Genuinity comes at a price.&lt;br&gt;
      &lt;font color="#f06"&gt;Will you pay it?&lt;/font&gt;&lt;/div&gt;
    &lt;div class="anima-image-slide3"&gt;&lt;img src="img/lowrider1.png" width="250" height="250"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS: (Same for 2 and 3)</p>
  
  <pre><code>.anima-text-slide1 {
      margin-top:10px;
      position:absolute;
      font-family: 'BebasRegular';
      color:#FFF;
      font-size:40px;
  }
  .anima-text-slide1 {
      -webkit-backface-visibility: visible;
      -webkit-transition: 900ms ease;
      opacity: 0;
      -webkit-transform: translate(-497px, 0px) rotate(0deg);
  }
  .anima-image-slide1 {
      position:absolute;
      left: 610px;
      top: 0px;
  }
  .anima-image-slide1 {
      -webkit-backface-visibility: visible;
      -webkit-transition: 900ms ease;
      opacity: 0;
      -webkit-transform: translate(497px, 0px) rotate(0deg);
  }
  </code></pre>