마우스 방향에 따른 롤오버 모션 구현

.container { margin:100px; overflow:hidden; }
.block { float:left; width:100px; height:200px; margin:30px; background:#eee; position:relative; overflow:hidden; }
.bg { width:100%; height:100%; background:red; position:absolute; top:0; left:0; transform:translate3d(-100%,-100%,0); transition:all 0.3s; }

<div class="container">
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
	<div class="block"><div class="bg"></div></div>
</div>

$.fn.hitTest = function(x, y){
	var bounds = this.offset();
	bounds.right = bounds.left + this.outerWidth();
	bounds.bottom = bounds.top + this.outerHeight();
	if(x >= bounds.left){
		if(x <= bounds.right){
			if(y >= bounds.top){
				if(y <= bounds.bottom){
					return true;
				}
			}
		}
	}
	return false;
}

$(document).ready(function() {
	var mouse = {},
		$block = $('.container .block'),
		startFlag = false;

	$(document).on('mousemove', function(e) {
		mouse.x = e.pageX;
		mouse.y = e.pageY;

		$block.each(function(index, el) {
			var $this = $(this),	
				hover = $this.hitTest(mouse.x, mouse.y),
				$bg = $this.find('.bg'),
				$offset = $this.offset(),
				width = $this.width(),
				height = $this.height(),
				center = {
					x : $offset.left + (width / 2),
					y : $offset.top + (height / 2)
				}
				range = {
					x1 : center.x + width / 6,
					x2 : center.x - width / 6,
					y1 : center.y + height / 6,
					y2 : center.y - height / 6
				},
				toStyle = {
					transition : (startFlag) ? 'all 0.3s' : 'none'
				};

			if(!hover) {
				if(mouse.x > range.x1) {
					// right
					toStyle.left = '200%';
				} else if(mouse.x < range.x2) {
					// left
					toStyle.left = '0';
				} else {
					// center
					toStyle.left = '100%';
				}

				if(mouse.y > range.y1) {
					// bottom
					toStyle.top = '200%';
				} else if(mouse.y < range.y2) {
					// top
					toStyle.top = '0';
				} else {
					// center
					toStyle.top = '100%';
				}

				$bg.css(toStyle);
			}
		});

		startFlag = true;
	});

	$block.on('mouseenter', function(e) {
		var $this = $(this),
			$bg = $this.find('.bg'),
			$offset = $this.offset(),
			width = $this.width(),
			height = $this.height(),
			center = {
				x : $offset.left + (width / 2),
				y : $offset.top + (height / 2)
			},
			range = {
				x1 : center.x + width / 6,
				x2 : center.x - width / 6,
				y1 : center.y + height / 6,
				y2 : center.y - height / 6
			},
			fromStyle = {
				transition : 'none'
			},
			toStyle = {
				transition : 'all 0.3s'
			};

		if(mouse.x > range.x1) {
			// right
			fromStyle.left = '200%';
			toStyle.left = '100%';
		} else if(mouse.x < range.x2) {
			// left
			fromStyle.left = '0';
			toStyle.left = '100%';
		} else {
			// center
			fromStyle.left = '100%';
			toStyle.left = '100%';
		}

		if(mouse.y > range.y1) {
			// bottom
			fromStyle.top = '200%';
			toStyle.top = '100%';
		} else if(mouse.y < range.y2) {
			// top
			fromStyle.top = '0';
			toStyle.top = '100%';
		} else {
			// center
			fromStyle.top = '100%';
			toStyle.top = '100%';
		}
		
		$bg.css(fromStyle);
		setTimeout(function() {
			$bg.css(toStyle);
		}, 10);
	});
});