1

誰かがドアのように開始する画像でアニメーションを作成するのを手伝ってもらえますか.translation-origin-x が画像の右側にあり、その上にマウスを置くと、ドアのように閉じます。私が持っているものはうまく機能せず、画像が消えます。誰かが私のためにそれを完璧にすることができます.jsFiddleへのリンクです。可能であれば、キーフレームで開始して、そのページが読み込まれると、ホバーアニメーションではなくアニメーションをすぐに開始できますか?

ここに私のCSSがあります:

body > section > header > #section-logo {
    -webkit-perspective:300px;
   -webkit-transform-style:preserve-3d
}
body > section > header > #section-logo img{
    margin-right:80px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;        
    -webkit-transform-origin-x:100%;        
    -webkit-transform: rotateY(-45deg) translateX(0px) 

}
body > section > header > #section-logo:hover img {

    -webkit-transform:rotateY(-0deg)
}

そしてHtml：

    <section>
    <header>
        <div id="section-logo">
            <img id="" alt="" src="Images/shop_departments_large.png" width="163" height="155" />
        </div>
    </header>
</section>
4

1 に答える 1

2

更新 ページの読み込み時にドアが一度閉じて、閉じたままになります。これを確認してください：http://jsfiddle.net/error007/NL5Mn/5/

@-webkit-keyframes swingd {
    0% { -webkit-transform: rotateY(-50deg); }
    100% { -webkit-transform: rotateY(0deg); }
    /*
    50% { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(-50deg); }
    */
}

#section-logo {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective:300px;
}
#section-logo img{
    margin-right:80px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;        
    -webkit-transform-origin: 100% 0%; 
    -webkit-transform: rotateY(0deg);
    /*-webkit-animation: swingd 2s infinite ; */
    -webkit-animation: swingd 3s 1;
}

#section-logo:hover img {
    -webkit-transform: rotateY(0deg);
}
于 2013-10-17T04:33:37.017 に答える