Black_Star,
здравствуйте.
Не знаю, что такое эффект открытки
Может покажите пример?
У Вас скобки потеряны и 71-я строка какая-то совсем не правильная... Вот так можно поворачивать:
<!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" id = "div">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 (){
w = $(window).width(), //window width
h = $(window).height(); //window height
$('.block').on('mousemove', function(e) {
var coords = e.target.getBoundingClientRect();
tt = e.pageX - coords.left
e.target.style.transform = 'rotate('+tt+'deg)';
});
})
</script>
</body>
</html>