Question

我想使用jQuery站起来一个平面图像，好像它平躺在桌子上，然后在页面加载时垂直竖立，就像一本弹出书......

是否有人知道有任何资源可以帮助我或了解解决方案？

Answer 1

您可以使用http://ricostacruz.com/jquery.transit/（ - >＆gt; 3D ROTATION-＆gt;旋转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' });
});

如何使用jQuery站起来像弹出书一样站立“平面图像”

1 个答案: