jquery - jQueryを使って「フラットなイメージ」をポップアップブックのように立てる方法

Question

テーブルの上に平らに横たわっているかのようにjQueryを使用して平らな画像を立て、ポップアップブックのようにページの読み込み時に垂直に立てたい...

誰かが私を助けるためのリソースを知っているか、解決策を考えていますか?

Answer 1

http://ricostacruz.com/jquery.transit/ (->3D ROTATION->Rotate X)を使用できます。

以下は、Chrome 20 http://jsfiddle.net/t9Dty/で機能します

HTML:

<div class="rotate">
  Hello World
</div>

<a href="#">run it</a>

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' });
});
​