How can you apply a translate to an element but make it move to a point on the page rather than relative to itself?
For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for it to move to the center of the page.
<html>
<head>
<style>
.face {
-webkit-backface-visibility: hidden;
position: absolute;
height: 140;
width: 80;
overflow: hidden;
}
.card {
height: 100;
width: 80;
float: left;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
margin-left: 5px;
-webkit-transition-property: transform;
-webkit-transition-duration: 0.25s;
-webkit-transition-timing-function: ease-out;
}
.activated {
-webkit-transform: scale(2) translate(50px, 100px);
-webkit-transition-duration: 0.35s;
-webkit-transition-timing-function: ease-in;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.card').click(function (e) {
e.preventDefault();
$(this).toggleClass("activated");
});
});
</script>
</head>
<body>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
<div class="card">
<div class="face front">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/6/64/Edwin_P_Morrow.jpg/100px-Edwin_P_Morrow.jpg" />
<span>blah!</span>
</div>
<div class="face back">explanation</div>
</div>
</body>
</html>