SOURCE

$(window).load(function(){
	var pageWidth = $(this).width(),
		pageHeight = $(this).height(),
		currentX = pageWidth/2,
		currentY = pageHeight/2,
		newX = currentX,
		newY = currentY,
		card = $('.card-outer'),
		inner = $('.card-inner'),
		speed = 1,
		distanceX,
		distanceY,
		accelerationX,
		accelerationY,
		started = false,
		pressed = false,
		movementInterval,
		noStars = 100,
		space = $('.space-bg'),
		idleInterval,
		spacePosX,
		spacePosY;

	function createStars() {
		for (var i = 0; i < noStars; i++) {		
			var x = Math.random() * 100;
			var y = Math.random() * 100;
			var size = Math.random() * 10;
			space.append('<div class="star" style="width: '+size+'px; height: '+size+'px; top: '+y+'%; left: '+x+'%"></div>');
		}
	}

	function idle() {
		var count = 1;
		speed = 0.5;
		idleInterval = setInterval(function(){
			count++;
			newX = currentX + (Math.cos((count)/50)*100);
			newY = currentY + (Math.cos(((count*2))/50)*100);
		},10);
	}

	card.on('mousedown touchstart', function(i){
		if (!started) {
	  	started = true;
			speed = 1;
    	clearInterval(idleInterval);
		}
    
		if ("ontouchstart" in document.documentElement) {
				i = i.originalEvent.touches[0] || i.originalEvent.changedTouches[0];
			}
		pressed = true;
		$(this).addClass('clicked');
		newX = i.pageX;
		newY = i.pageY;

		$('body').on('mouseup touchend', function(){
			pressed = false;
			card.removeClass('clicked');
      
		});
	});

	$(this).on('mousemove', function(x){
		if (pressed) {
			newX = x.pageX;
			newY = x.pageY;
		}
	});

	$(document).on('touchmove', function(e){
		if (pressed) {

			if ("ontouchstart" in document.documentElement) {
				e = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			}
			newX = e.pageX;		
			newY = e.pageY;	
			
		}	
	});

	function startPos() {
		card.css('transform', 'translate('+currentX +'px, '+currentY+'px)');
	}

	function invert(a) {
		a = a * -1;
		return a;
	}

	function movement() {
		if (currentX !== newX) {
			distanceX = newX - currentX;
			accelerationX = Math.abs(distanceX) / 8;
			
			if (currentX < newX) {
				currentX += speed * accelerationX; 
			} else {
				currentX -= speed * accelerationX;
			}
		}

		if (currentY !== newY) {			
			distanceY = newY - currentY;
			accelerationY = Math.abs(distanceY) / 8;

			if (currentY < newY) {
				currentY += speed * accelerationY; 
			} else {
				currentY -= speed * accelerationY;
			}
		}

		spacePosX = pageWidth/2 - (pageWidth * (currentX/pageWidth));
		spacePosY = pageHeight/2 - (pageHeight * (currentY/pageHeight));

		inner.css('transform', 'rotateX('+invert(distanceY)/8+'deg) rotateY('+(distanceX)/8+'deg)');
		card.css('transform', 'translate('+currentX +'px, '+currentY+'px)');
		space.css('transform', 'translate('+spacePosX +'px, '+spacePosY+'px)');

		movementInterval = requestAnimationFrame(movement);
	}

	createStars();
	startPos();
	movementInterval = requestAnimationFrame(movement);
	idle();
});

<div class="space-bg"></div>
	<div class="drag-area">
	
		<div class="card-outer">
			<div class="card-inner">
				

				<div class="card-image">
					
				</div>
			</div>
		</div>
	</div>
<p>Click and drag the invader to take control</p>

body, html {
	position: fixed;
	width: 100%;
	height: 100%;
  background-color: #000;
}

p {
  position: fixed;
  color: #fff;
  width: 100%;
  bottom: 10px;
  font-size: 12px;
  text-align: center;
  font-family: sans-serif;
}

.space-bg {
	width: 200%;
	height: 200%;
	position: absolute;
	z-index: -1;
	left: -50%;
	top: -50%;
	opacity: 0.5;

	.star {
		//opacity: 0.8;
		box-shadow: 0 0 50px #fff;
		background-color: #FFF;
		position: absolute;
	}
}

.drag-area {
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;   

	.card-outer {
		width: 200px;
		height: 150px;
		position: absolute;
		margin-left: -100px;
		margin-top: -75px;
		transform-origin: 50% 50%;
		-webkit-perspective: 400px; /* Chrome, Safari, Opera */
		perspective: 400px;
		cursor: -webkit-grab; cursor: -moz-grab;
		will-change: transform;


		&.clicked {
			cursor: -webkit-grabbing; cursor: -moz-grabbing;

			.card-inner .card-image {
				transform: scale(1.6);
			}
		}

		@media only screen and (max-width : 568px) {
			width: 60px;
			height: 40px;
			margin-left: -30px;
			margin-top: -20px;
			perspective: 100px;

			&.clicked .card-inner .card-image {
				transform: scale(3);

			}
		}

		.card-inner {
			height: 100%;
			width: 100%;
			position: relative;
			will-change: transform;

			.card-image {
				transition: 200ms all;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				background-image: url("http://www.id-devspace.co.uk/invaders-app/invader.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: center;
				border-radius: 10px;
			}
		}
	}
}