Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to stand up "flat image" to standing like popup book using jQuery

How to stand up "flat image" to standing like popup book using jQuery

Problem

I want to stand up a Flat image using jQuery as if it was lying flat on a table and then stood up vertically on page load like a pop up book...

Does anyone know of any resources to help me or have an idea of a solution?

Problem courtesy of: Daniel Cheeseman

Solution

You could use http://ricostacruz.com/jquery.transit/ (->3D ROTATION->Rotate X)

The following works for me in Chrome 20 http://jsfiddle.net/t9Dty/

HTML:

Hello World
run it

CSS:

body{
  padding: 50px;
}

.rotate{
  width: 100px;
    height: 200px;
    border:1px solid #000;
    -webkit-box-shadow: 0px 0px 10px 2px #000000;
    background: #eee; 
    -webkit-transform: rotateX(90deg)
}

JS:

//set transform origin to y bottom
$('.rotate').css({ transformOrigin: '50% 100%' });

$('a').click(function(){
  $('.rotate').transition({ rotateX: '0deg', perspective: '100px' });
});
​
Solution courtesy of: Max Girkens

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to stand up "flat image" to standing like popup book using jQuery

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×