how to rotate image image 3d in jquery on swipe up and swipe down

Question

I have to rotate my image in 3d as shown in below image .There is blue line .I need to rotate my image in this direction when swipe up and down .please ignore green green line is there any way when I swipe up or swipe down it spin / rotate some angle ..

here is my fiddle http://jsfiddle.net/wemsbtwj/2/

function scrolling() {
    $("img").css({
            'transform': 'rotate(' + ($("main").scrollTop() / mainHeight * 360) + 'deg)'
    });
}

var mainHeight = $("main").height();

window.addEventListener("scroll", scrolling, false);

enter image description here

rajatha · Answer 1 · Aug 4, 2022

If you're not using one of the platforms above, install Magic 360 like so:

Quick install:

Download the Magic 360 demo (zip).
Unzip the file on your computer and FTP the magic360 folder to your website directory (on your server), keeping the file and folder structure intact.
Use the wizard to create the HTML for your spin.
Copy and paste the HTML into your page.

Detailed install:

<a class="Magic360" data-options="filename: imagename-{col}.jpg;"><img src="imagename-01.jpg" /></a>

Download the Magic 360 demo (zip).
Unzip the file on your computer and FTP the magic360 folder to your website directory (on your server), keeping the file and folder structure intact.
Reference the magic360.js and magic360.css files before your </head> tag.
```
<link type="text/css" rel="stylesheet" href="magic360/magic360.css"/>
<script type="text/javascript" src="magic360/magic360.js"></script>
```
(If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)
Insert an <img> tag for the first image in your spin. Wrap an <a> tag around it with a class of Magic360 and href of #.

Specify the format of your file names using the filename parameter inside a data-options tag (this is described in detail below). A basic HTML page could look like this:

<html>
<head>
<title>Magic 360 example</title>
<link href="magic360/magic360.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="magic360/magic360.js"></script>
</head>
<body>
<a class="Magic360" data-options="filename: imagename-{col}.jpg;"><img src="imagename-01.jpg" /></a>
</body>
</html>