2

div要素の状態を変換する次の HTML/CSS マークアップがあり:hoverます。

div要素にカーソルを合わせると、:hoverスタイルが正しく追加されます。ただし、マウスを動かすと、マウスの動きが止まるまでこれらのスタイルは失われます。

なぜこうなった？

HTML:

<div class="module">
sdfsdf
<br><br>
<img src="http://placekitten.com/100/100" />
</div>​

CSS:

.module
{
    width:200px;
    height:200px;
    background:blue;
    margin:10px;
    color:#fff;
    padding:10px;
}

.module:hover
{
    -webkit-transform-origin:50% 50%;
    -webkit-transition:-webkit-transform 0.08s;
    -webkit-font-smoothing:antialiased;
    -webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-20px);

}​

-- jsFiddle デモを見る --

注: 私のデモと CSS は、現時点では webkit 専用です。

Google Chrome バージョン 23.0.1271.95 m でこの問題を再現しています

4

3 に答える 3

0

正常に動作するように変更したため、問題は負のz値に関係しているようtranslateZ(20px);です。余分なものを使用したくない場合の修正は、divに追加-webkit-transform-style: preserve-3d;することbodyです。

これが更新されたjsfiddleです

お役に立てば幸いです。

于 2012-12-12T08:07:44.087 に答える
0

Chromeを使用しても同じです。これで修正されます：

<div class="container">
<div class="module">
    <img src="http://placekitten.com/100/100"> 
</div>
</div>

とcss

.module
{
width:200px;
height:200px;
background:blue;
color:#fff;
padding:10px;
}

.container:hover .module
{
-webkit-transform-origin:50% 50%;
-webkit-transition:-webkit-transform 0.08s;
-webkit-font-smoothing:antialiased;
-webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-20px);

}​​​​​​​​​​​​​​​​​​​
于 2012-12-07T15:06:40.173 に答える
0

これを試して

コンテナdivに入れました。コンテナーにホバーを適用し、.module のポインターイベントを none に設定しました。不要なものを削除しました。必要に応じて、これらのいくつかに -webkit- を追加することもできます。私には必要ではなかったようです。

トランジションをホバーコードの外に移動したことに注意してください `

* {
    box-sizing: border-box;
}

.container {
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid black;
    perspective: 800px;
}

.module {
    width: 200px;
    height: 200px;
    background: blue;
    color: #fff;
    padding: 10px;
    pointer-events: none; 
    transition: transform 0.08s;
}

.container:hover .module {
    transform: translateZ(-20px);
}
        <div class="container">
            <div class="module">
                sdfsdf
                <br />
                <br />
                <img src="http://placekitten.com/100/100" />
            </div>​
        </div>

`

于 2019-10-07T16:06:44.363 に答える