forked from LuvishYadav/Image-3dRotate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (75 loc) · 2.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<title>example by: Luvish</title>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
body {
margin: 0;
background-color: silver;
}
#tracking-area {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid gray;
}
#transformation-area {
<!-- position: absolute; -->
<!-- top: 100px; -->
<!-- left: 100px; -->
width: 300px;
height: 300px;
background-image: url('image.jpg');
background-size: cover;
}
</style>
<script>
// The following two numbers define the angles (in degrees)
// that the transformation area will be rotated at about
// X and Y axes when the cursor reaches the right (for Y)
// and the top (for X) borders of the tracking area.
var maxRotationDegreesX = 60;
var maxRotationDegreesY = 60;
// This effectively defines the distance along X axis between
// the reference point and the projection plane. The greater the
// number, the greater the transformation area's projection
// is deformed due to perspective.
var perspectivePx = 600;
$(document).ready(function () {
// These variables are requried to translate screen coordinates
// supplied by mouse event into the coordinate system with
// its reference point placed in the center of the tracking area.
var trackingAreaShiftX = $("#tracking-area").offset().left;
var trackingAreaShiftY = $("#tracking-area").offset().top;
var halfTrackingAreaWidth = $("#tracking-area").width() / 2;
var halfTrackingAreaHeight = $("#tracking-area").height() / 2;
var mouseCoordinateCorrectionX = trackingAreaShiftX + halfTrackingAreaWidth;
var mouseCoordinateCorrectionY = trackingAreaShiftY + halfTrackingAreaHeight;
$("#tracking-area").on("mousemove", function () {
// Translate cooridnates of the mouse ponter
var x = event.clientX - mouseCoordinateCorrectionX;
var y = event.clientY - mouseCoordinateCorrectionY;
// Calculate degrees of rotation with respect to their maximum values
var rotationY = x * maxRotationDegreesX / halfTrackingAreaWidth;
var rotationX = -y * maxRotationDegreesY / halfTrackingAreaHeight;
// Construct CSS transform setting string
var transform = `perspective(${perspectivePx}px) rotate3d(1, 0, 0, ${rotationX}deg) rotate3d(0, 1, 0, ${rotationY}deg)`;
// Apply the transformation
$("#transformation-area").css("-webkit-transform", transform);
$("#transformation-area").css("-moz-transform", transform);
$("#transformation-area").css("-ms-transform", transform);
$("#transformation-area").css("-o-transform", transform);
$("#transformation-area").css("transform", transform);
});
});
</script>
</head>
<body>
<div id="tracking-area">
<div id="transformation-area">
</div>
</div>
</body>
</html>