0

我想创建一个介绍页面，例如通过 jQuery 和 CSS 3 在此站点中的内容： milaadesign.com。
但我不知道如何实现它。

我知道我必须有一些元素，当鼠标悬停事件发生时，我必须旋转它并在其中显示图像。

我想我必须使用RotateY() 转换 CSS 3和 jQuery 来为其设置动画。

您对此有何想法，您知道实现此目的的 jQuery 插件吗？

4

4 回答 4

2

我会使用这个插件：http ://ricostacruz.com/jquery.transit/它可以满足您的一切需求。

这是一个代码示例：

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

应该很容易定制以完全满足您的需求。

于 2012-05-01T13:08:05.523 回答
1

使用imagecube插件。

看看： http: //keith-wood.name/imageCube.html

于 2012-05-01T13:02:48.017 回答
1

使用 CSS3 过渡和变换可以达到预期的效果。像这样的东西可以解决问题：

<style>
#barContainer div
{
    height:300px;
    width:20px;

    background:#CCC;
    float:left;

    margin:10px;
    -webkit-transition: all 0.3s ease;
}
#barContainer div:hover
{
    -webkit-transform:scaleX(-1);
    margin-top:15px;
}

#barContainer #bar1:hover
{
    background:#FF0000;
}

#barContainer #bar2:hover
{
    background: #00FF00;
}

#barContainer #bar3:hover
{
    background: #0000FF;
}
</style>

<div id='barContainer'>
    <div id='bar1'></div>
    <div id='bar2'></div>
    <div id='bar3'></div>
</div>

它只适用于支持 CSS3 的浏览器。

于 2012-05-01T13:02:56.417 回答
1

您可以查看以下内容，以帮助您入门。

插件：更符合您的要求 http://dev.jonraasch.com/quickflip/examples/

http://webmuch.com/image-flip-using-jquery/

http://www.w3schools.com/css3/css3_3dtransforms.asp

于 2012-05-01T13:04:53.677 回答