Добрый день уважаемые. Возник интерес сделать некий эффект открытки, когда при наведении курсором на див, (в зависимости от его местоположения) идет трансформация этого дива. Сверху объекта водишь- нижний край открытки "надвигаеться", снизу -верхний.
Эффект довольно часто встречал на разных сайтах.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style>
.field {
display: block;
position: relative;
background: #0C0C0E no-repeat 50% 50%;
width: 200px;
height: 400px;
margin: 1%;
border-radius: 5px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 1.5;
}
.field .block {
position: relative;
float: left;
width: 80px;
height: 100px;
margin: 5%;
background-color: gold;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
overflow: hidden;
color: black;
font-size: 1.5em;
text-align: center;
}
</style>
<body>
<div class="field">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
</div>
<script>
function BlockShow() {
var $poster = $('.block'),
w = $(window).width(), //window width
h = $(window).height(); //window height
$(window).on('mousemove', function(e) {
var offsetX = 0.5 - e.pageX / w, //cursor position X
offsetY = 0.5 - e.pageY / h, //cursor position Y
dy = e.pageY - h / 2, //@h/2 = center of poster
dx = e.pageX - w / 2, //@w/2 = center of poster
theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
angle = theta * 180 / Math.PI - 90, //convert rad in degrees
offsetPoster = $poster.data('offset'),
transformPoster = translateY('offsetX' + px) rotateX('offsetY' + deg) rotateY('offsetX' + deg); //poster transform
//poster transform
$poster.css('transform', transformPoster);
}BlockShow()
</script>
</body>
</html>
Подскажите, пожалуйста, где я допускаю ошибку ?