title: Firefox RotateY Transform not working
body: <p>I have a page that displays pictures of people that can be resized via jQuery.  I am using a sprite image that displays 3 squares that change as you select/hover them.  I am using CSS3 Transition &amp; Transform (RotateY) to animate the change.
  The transition and transform works in Chrome (v22), but not in Firefox (v16).</p>
  
  <p>I have create a jsFiddle example: <a href="http://jsfiddle.net/WPEbW/7/" rel="nofollow">http://jsfiddle.net/WPEbW/7/</a></p>
  
  <pre><code>&lt;div id="divOptions" runat="server" style="padding: 0 10px; margin: 10px; overflow: hidden; zoom: 1"&gt;
      &lt;div style="float: left"&gt;
          &lt;div id="divSmallImage" runat="server" class="ResizeImages Small" title="Small"&gt;
          &lt;/div&gt;
          &lt;div id="divMediumImage" runat="server" class="ResizeImages Medium Selected" title="Medium"&gt;
          &lt;/div&gt;
          &lt;div id="divLargeImage" runat="server" class="ResizeImages Large" title="Large"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  
  .ResizeImages { cursor: pointer; display: inline-block; background-position: 0; -moz-transform:rotateY(0deg) }
  .ResizeImages:hover { box-shadow: #CCC 1px 1px 5px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
  .ResizeImages.Selected { -webkit-transition: background-position 0 .4s,-webkit-transform 1s; -webkit-transform: rotateY(180deg); -moz-transition: background-position 0 .4s,-moz-transform 1s; -moz-transform: rotateY(180deg); -o-transition: background-position 0 .4s,-o-transform 1s; -o-transform: rotateY(180deg); transition: background-position 0 .4s,transform 1s; transform: rotateY(180deg); }
  .ResizeImages.Small { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') 0 0 no-repeat; width: 12px; height: 12px; }
  .ResizeImages.Small:hover { background-position: 0 -12px; }
  .ResizeImages.Small.Selected { background-position: 0 -24px; }
  .ResizeImages.Medium { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -12px 0 no-repeat; width: 16px; height: 16px; }
  .ResizeImages.Medium:hover { background-position: -12px -16px; }
  .ResizeImages.Medium.Selected { background-position: -12px -32px; }
  .ResizeImages.Large { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -28px 0 no-repeat; width: 20px; height: 20px; }
  .ResizeImages.Large:hover { background-position: -28px -20px; }
  .ResizeImages.Large.Selected { background-position: -28px -40px; }
  
  $(document).ready(function() {
      function SetSize(selectedImage) {
          if (typeof selectedImage !== 'undefined') {
              $('.ResizeImages.Selected').removeClass('Selected');
              $(selectedImage).addClass('Selected');
          }
      }
      SetSize();
      $('.ResizeImages').click(function() {
          SetSize(this);
      });
  });​
  </code></pre>
  
  <p>I believe that the transition and transform I am using should work in Firefox, but don't know why they aren't.  </p>
  
  <p>Thanks in advance,<br>
  -Aaron</p>