How to create animated element that follows browser like on http://metalab.co/projects/swivl/? [closed]


Tags: jquery,css3,animation,orientation,tilt

Problem :

How to create animated element that follows browser like on http://metalab.co/projects/swivl/ ?

I tried looking at there html code but there is just a transition on the div that holds the ipad background image. I have been unable to figure out what css/ js is causing this effect making the ipad turn and follow the visitors mouse location ( left and right pan )



Solution :

you can do this by setting the transform property of an element on mousemove.

Like so:

var $window = $(window),
    $box = $('#box')
    rotation = 0;

$window.on('mousemove', function(event){    
    rotation = (event.pageX/$window.width()*90) - 45;
    $box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});

see the fiddle

it will work in newest chrome and ff. note that you may use browser prefixes for the transform attribute (-webkit-, -moz- ...). it depends on your supported browsers.


    CSS Howto..

    how to display three text fields on one line

    How to make css two borders?

    How to position an icon in a metro-like web GUI? (images included)

    How to apply CSS to anchor with active class only (parent only) and not include children?

    How to set outline without using CSS outline property?

    How classes work in a CSS file? [closed]

    Using CSS, how do I move a DIV to the left of the centre position?

    How to apply a css rule based on the number of siblings an element has? [duplicate]

    How to fix a double click on a jQuery slide up/down animation?

    How to isolate specific platforms using CSS selectors in the Ionic framework

    HTML/CSS: How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?

    How to centre my CSS menu?

    How to hide a whole a
    if table tag is is empty or null?

    How to make CSS input range thumb not appear at first

    How to set dynamic responsive divs with only CSS (no javascript)?

    How to make CSS div width equal to browser width if element is inside wrapper element

    How to make the height of the div take all the space?

    How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )? [closed]

    How to get to be the same width as
    ?

    how to apply css class condtionally in angularjs

    How to change the css of color of select2 tags?

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    How to have text slide in when I hover over navbar?

    How to highlight the table row using jquery in Rails 3?

    How to make transparent corners of borders for a perspective effect?

    How to change the border of an element when selected?

    How to make the posts of a content type horizontal scrollabel?

    UI Challenge - how to draw “connectors” between elements?

    How To Put Values Dynamically