How to take a div that is off screen and translate it to the middle of the screen using translateX()

Tags: jquery,html,css,css3

Problem :

Let me explain a little more in depth. I'm looking to have a div off screen. When a user clicks on a button I want the div to transition onto the screen.

<a href="#" id="button">Click Me</a>
   <div style="position:absolute;left:-100%;width:80%;height:80%;background:yellow; id="block" class="objecttransition"></div>

Here is the JS:

$("#button").click(function(){
 $("#block".addClass("move");
}):

Here is the CSS:

.move
  {
    transform: translateX($$);
    -webkit-transform: translateX($$); /** Safari & Chrome **/
    -o-transform: translateX($$); /** Opera **/
    -moz-transform: translateX($$); /** Firefox **/
  }

.objecttransition
  {
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
  }

My question now is by how much do I move the block to the right to make sure that the block is always in the middle of the screen regardless of the screen size??

---

Solution :

This actually can be done without any Javascript, anyway here's a working example using jQuery.

<div>Hello!</div>

div {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 100%;
    width: 5rem;
    line-height: 5rem;
    text-align: center;
    background: red;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50 -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 1200ms;
    -moz-transition: 1200ms;
    transition: 1200ms; }

div.foo {
    opacity: 1;
    left: 50%;
}

$( document ).on('click', function() {
    $( 'div' ).toggleClass( 'foo' );
});