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

0 votes

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

Aug 3 in Web Development by gaurav
• 18,960 points
97 views

1 answer to this question.

0 votes

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

Quick install:

  1. Download the Magic 360 demo (zip).
  2. 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.
  3. Use the wizard to create the HTML for your spin.
  4. 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>
  1. Download the Magic 360 demo (zip).
  2. 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.
  3. 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.)

  4. 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 #.
  5. 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>
answered Aug 4 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

Swipe up and Swipe down in javascript or jquery

I am trying to do swipe up ...READ MORE

Aug 24 in Web Development by gaurav
• 18,960 points
48 views
0 votes
0 answers

How to add a link in Jquery PrettyPhoto to download the image

I am using Jquery PrettyPhoto to have ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
47 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
1,250 views
0 votes
0 answers

How to make notices pop up as jquery on Ruby on Rails 4

I have a user controller with the ...READ MORE

Jul 28 in Web Development by gaurav
• 18,960 points
39 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
334 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
9,373 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
16,593 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,780 points
1,440 views
0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,440 points
76 views
0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
43 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP