title: CSS Transform happens instantly in Safari
body: <p>i'm a huge noob just trying to learning to code on my own.. and i'm at the point where i want my code to work in all the popular browsers .. :) .. i'm starting with Safari.. my code runs fine in chrome.. but the -webkit-transition: transform 1.0s; just happens instantly on safari for some reason.. not sure if there is an extra meta tag that I need or something.. but this is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;section id="prismSection"&gt;
  
          &lt;h1 class="text-center"&gt;Now a Rectangular Prism&lt;/h1&gt;
  
          &lt;div class="prismWrapper"&gt;
              &lt;div id="prism"&gt;
                  &lt;figure class="front"&gt;&lt;p&gt;Front&lt;/p&gt;&lt;/figure&gt;
                  &lt;figure class="back"&gt;&lt;p&gt;Back&lt;/p&gt;&lt;/figure&gt;
                  &lt;figure class="right"&gt;&lt;p class="vertical-text"&gt;Right&lt;/p&gt;&lt;/figure&gt;
                  &lt;figure class="left"&gt;&lt;p class="vertical-text2"&gt;Left&lt;/p&gt;&lt;/figure&gt;
                  &lt;figure class="top"&gt;&lt;p&gt;Top&lt;/p&gt;&lt;/figure&gt;
                  &lt;figure class="bottom"&gt;&lt;p&gt;Bottom&lt;/p&gt;&lt;/figure&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;button class="btn btn-lg btn-primary" onclick="prismFront();"&gt;Front&lt;/button&gt;
          &lt;button class="btn btn-lg btn-primary" onclick="prismBack();"&gt;Back&lt;/button&gt;
          &lt;button class="btn btn-lg btn-primary" onclick="prismRight();"&gt;Right&lt;/button&gt;
          &lt;button class="btn btn-lg btn-primary" onclick="prismLeft();"&gt;Left&lt;/button&gt;
          &lt;button class="btn btn-lg btn-primary" onclick="prismTop();"&gt;Top&lt;/button&gt;
          &lt;button class="btn btn-lg btn-primary" onclick="prismBottom();"&gt;Bottom&lt;/button&gt;
  
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#prismSection {
      text-align: center;
      padding-bottom: 40px;
  }
  #prismSection &gt; button {
      border: 2px solid black;
  }
  #prismSection &gt; h1 {
      color: white;
      font-family: Paytone One, arial;
      font-size: 2.5em;
  }
  #prism &gt; figure:nth-child(1) &gt; p,
  #prism &gt; figure:nth-child(2) &gt; p,
  #prism &gt; figure:nth-child(3) &gt; p,
  #prism &gt; figure:nth-child(4) &gt; p {
      color: black;
      font-family: Paytone One, arial;
      position: relative;
      top: 50px;
      font-size: 3em;
  }
  #prism &gt; figure:nth-child(4) &gt; p {
      top: 65px;
  }
  #prism &gt; figure:nth-child(5) &gt; p,
  #prism &gt; figure:nth-child(6) &gt; p {
      color: black;
      font-family: Paytone One, arial;
      position: relative;
      top: 10px;
      font-size: 3em;
  }
  .vertical-text {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
  }
  .vertical-text2 {
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
  }
  .prismWrapper {
      margin-top: 50px;
      margin-bottom: 50px;
      width: 300px;
      height: 200px;
      position: relative;
      perspective: 1000px;
      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      margin-right: auto;
      margin-left: auto;
  }
  #prism {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
  }
  #prism figure {
      display: block;
      position: absolute;
      background: #606060;
      border: 2px solid white;
      border-radius: 5px;
  }
  #prism .front,
  #prism .back {
      width: 296px;
      height: 196px;
  }
  #prism .right,
  #prism .left {
      width: 96px;
      height: 196px;
      left: 100px;
  }
  #prism .top,
  #prism .bottom {
      width: 296px;
      height: 96px;
      top: 50px;
  }
  #prism .front {
      transform: rotateY( 0deg ) translateZ( 50px);
      -webkit-transform: rotateY( 0deg ) translateZ( 50px);
      -ms-transform: rotateY( 0deg ) translateZ( 50px);
      -o-transform: rotateY( 0deg ) translateZ( 50px);
      -moz-transform: rotateY( 0deg ) translateZ( 50px);
  }
  #prism .back {
      transform: rotateY( 180deg ) translateZ( 50px);
      -webkit-transform: rotateY( 180deg ) translateZ( 50px);
      -ms-transform: rotateY( 180deg ) translateZ( 50px);
      -o-transform: rotateY( 180deg ) translateZ( 50px);
      -moz-transform: rotateY( 180deg ) translateZ( 50px);
  }
  #prism .right {
      transform: rotateY( 90deg ) translateZ( 150px );
      -webkit-transform: rotateY( 90deg ) translateZ( 150px );
      -ms-transform: rotateY( 90deg ) translateZ( 150px );
      -o-transform: rotateY( 90deg ) translateZ( 150px );
      -moz-transform: rotateY( 90deg ) translateZ( 150px );
  }
  #prism .left {
      transform: rotateY( -90deg ) translateZ( 150px );
      -webkit-transform: rotateY( -90deg ) translateZ( 150px );
      -ms-transform: rotateY( -90deg ) translateZ( 150px );
      -o-transform: rotateY( -90deg ) translateZ( 150px );
      -moz-transform: rotateY( -90deg ) translateZ( 150px );
  
  }
  #prism .top {
      transform: rotatex( 90deg ) translateZ( 100px );
      -webkit-transform: rotatex( 90deg ) translateZ( 100px );
      -ms-transform: rotatex( 90deg ) translateZ( 100px );
      -o-transform: rotatex( 90deg ) translateZ( 100px );
      -moz-transform: rotatex( 90deg ) translateZ( 100px );
  }
  #prism .bottom {
      transform: rotatex( -90deg ) translateZ( 100px );
      -webkit-transform: rotatex( -90deg ) translateZ( 100px );
      -ms-transform: rotatex( -90deg ) translateZ( 100px );
      -o-transform: rotatex( -90deg ) translateZ( 100px );
      -moz-transform: rotatex( -90deg ) translateZ( 100px );
  }
  #prism { 
      transform: translateZ( -100px ); 
      -webkit-transform: translateZ( -100px ); 
      -ms-transform: translateZ( -100px ); 
      -o-transform: translateZ( -100px ); 
      -moz-transform: translateZ( -100px ); 
  }
  #prism.show-front {
      transform: translateZ( -50px ) rotateY( 0deg );
      -webkit-transform: translateZ( -50px ) rotateY( 0deg );
      -ms-transform: translateZ( -50px ) rotateY( 0deg );
      -o-transform: translateZ( -50px ) rotateY( 0deg );
      -moz-transform: translateZ( -50px ) rotateY( 0deg );
  }
  #prism.show-back {
      transform: translateZ( -50px ) rotateY( -180deg );
      -webkit-transform: translateZ( -50px ) rotateY( -180deg );
      -ms-transform: translateZ( -50px ) rotateY( -180deg );
      -o-transform: translateZ( -50px ) rotateY( -180deg );
      -moz-transform: translateZ( -50px ) rotateY( -180deg );
  }
  #prism.show-right {
      transform: translateZ( -150px ) rotateY( -90deg );
      -webkit-transform: translateZ( -150px ) rotateY( -90deg );
      -ms-transform: translateZ( -150px ) rotateY( -90deg );
      -o-transform: translateZ( -150px ) rotateY( -90deg );
      -moz-transform: translateZ( -150px ) rotateY( -90deg );
  }
  #prism.show-left {
      transform: translateZ( -150px ) rotateY( 90deg );
      -webkit-transform: translateZ( -150px ) rotateY( 90deg );
      -ms-transform: translateZ( -150px ) rotateY( 90deg );
      -o-transform: translateZ( -150px ) rotateY( 90deg );
      -moz-transform: translateZ( -150px ) rotateY( 90deg );
  }
  #prism.show-top {
      transform: translateZ( -100px ) rotateX( -90deg );
      -webkit-transform: translateZ( -100px ) rotateX( -90deg );
      -ms-transform: translateZ( -100px ) rotateX( -90deg );
      -o-transform: translateZ( -100px ) rotateX( -90deg );
      -moz-transform: translateZ( -100px ) rotateX( -90deg );
  }
  #prism.show-bottom {
      transform: translateZ( -100px ) rotateX( 90deg );
      -webkit-transform: translateZ( -100px ) rotateX( 90deg );
      -ms-transform: translateZ( -100px ) rotateX( 90deg );
      -o-transform: translateZ( -100px ) rotateX( 90deg );
      -moz-transform: translateZ( -100px ) rotateX( 90deg );
  }
  #prism { 
      transition: transform 1.0s;
      -webkit-transition: transform 1.0s;
      -ms-transition: transform 1.0s; 
      -o-transition: transform 1.0s;
      -moz-transition: transform 1.0s;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>        function prismFront() {
              $('#prism').removeClass('show-back');
              $('#prism').removeClass('show-right');
              $('#prism').removeClass('show-left');
              $('#prism').removeClass('show-top');
              $('#prism').removeClass('show-bottom');
              $('#prism').addClass('show-front');
          }
          function prismBack() {
              $('#prism').removeClass('show-front');
              $('#prism').removeClass('show-right');
              $('#prism').removeClass('show-left');
              $('#prism').removeClass('show-top');
              $('#prism').removeClass('show-bottom');
              $('#prism').addClass('show-back');
          }
          function prismRight() {
              $('#prism').removeClass('show-back');
              $('#prism').removeClass('show-front');
              $('#prism').removeClass('show-left');
              $('#prism').removeClass('show-top');
              $('#prism').removeClass('show-bottom');
              $('#prism').addClass('show-right');
          }
          function prismLeft() {
              $('#prism').removeClass('show-back');
              $('#prism').removeClass('show-right');
              $('#prism').removeClass('show-front');
              $('#prism').removeClass('show-top');
              $('#prism').removeClass('show-bottom');
              $('#prism').addClass('show-left');
          }
          function prismTop() {
              $('#prism').removeClass('show-back');
              $('#prism').removeClass('show-right');
              $('#prism').removeClass('show-left');
              $('#prism').removeClass('show-front');
              $('#prism').removeClass('show-bottom');
              $('#prism').addClass('show-top');
          }
          function prismBottom() {
              $('#prism').removeClass('show-back');
              $('#prism').removeClass('show-right');
              $('#prism').removeClass('show-left');
              $('#prism').removeClass('show-top');
              $('#prism').removeClass('show-front');
              $('#prism').addClass('show-bottom');
          }
  </code></pre>
  
  <p>i'll try to get a jsfiddle working soon.. thanks a ton.</p>
  
  <p>Edit:</p>
  
  <p>I've tried rewriting the button functions using more jquery syntax and giving each button an ID:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function() {
  
              $('#btnFront').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
              });
  
              $('#btnBack').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -50px ) rotateY( -180deg )');
              });
  
              $('#btnRight').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -150px ) rotateY( -90deg )');
              });
  
              $('#btnLeft').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -150px ) rotateY( 90deg )');
              });
  
              $('#btnTop').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -100px ) rotateX( -90deg )');
              });
  
              $('#btnBottom').on('click', function() {
                  $('#prism').css('transform', 'translateZ( -100px ) rotateX( 90deg )');
              });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>same results.</p>