0

jQueryとCSS3を介してこのサイトにあるようなイントロページを作成したいと思います： milaadesign.com。
しかし、私はそれを実装する方法がわかりません。

私はいくつかの要素が必要であることを知っています。それらに対してマウスオーバーイベントが発生したときは、それを回転させてその中に画像を表示する必要があります。

アニメーション化するには、 RotateY（）変換CSS3と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 に答える