title: append css style to add dynamic transform translate
body: <p>I have a page with a collection of about 5 images, all scattered on the page with various absolute positions and somewhat varying sizes.  My goal is to translate the images to the center of the screen using css and the hover event.</p>
  
  <p>Here is my css so far:</p>
  
  <pre><code>.bbimage{
  z-index: 1;
  -webkit-transition: -webkit-transform 0.8s ease;
  -moz-transition: -moz-transform 0.8s ease;
  transition: transform 0.8s ease;
  
  
  .bbimage:hover{
  position:absolute !important;
  /*left:50% !important;
  top:250px !important;   &lt;-very jittery and choppy */
  -ms-transform: scale(3) rotate(0deg)!important;
  -webkit-transform: scale(3) rotate(0deg)!important;
  transform: scale(3) rotate(0deg)!important;
  z-index: 3;
  cursor: pointer;
  }
  .bbplaceholder:hover + .bbimage{
  position:absolute !important;
  left:50% !important;
  top:250px !important;
  -ms-transform: scale(3) rotate(0deg) !important;
  -webkit-transform: scale(3) rotate(0deg) !important;
  transform: scale(3) rotate(0deg) !important;
  z-index: 3;
  cursor: pointer;
  }
  </code></pre>
  
  <p>Originally I was using simple transitions, but I found them to be choppy and jittery, especially in chrome.  I ended up switching to transforms, which works great for the scaling and rotation, but I'm left with two problems.</p>
  
  <p>This first problem, it that the transform: translate specifies a relative translation, not to an absolute position. The second problem is the potential variable screen sizes.</p>
  
  <p>My current attack plan it to append the css style using Jquery so as to specify a calculated relative translate to the window center.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>    &lt;script&gt;
  $( document ).ready(function() {
  $('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');
  
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>This doesn't appear to do anything and I'm not sure what I'm doing wrong.  I'm really new to css, and moderately new to Jquery.  Obviously, this is just a preliminary test to see if I can append the CSS, and I haven't calculated the window center yet.</p>