我想使用 jQuery 竖起一个平面图像,就好像它平放在 table 上一样,然后在页面加载时垂直竖起,就像一本弹出式书...
有没有人知道任何资源可以帮助我或有解决方案的想法?
最佳答案
你可以使用 http://ricostacruz.com/jquery.transit/ (->3D ROTATION->旋转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 - 如何使用 jQuery 使 "flat image"像弹出书一样站立,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11261279/