如何在鼠標懸停的情況下將div動畫爲3d

Question

我希望我的div在懸停時以3D方式彈出。請有人幫忙。我更喜歡它在香草的JavaScript。

Answer 1

無需JavaScript的，如果你只是想有鼠標懸停陰影。也許稍微動一下和添加的平滑過渡也都僅適用於CSS：

div { 
    transition: .2s ease-out; 
} 

div:hover { 
    box-shadow: 0 3px 10px rgba(0,0,0,.2); 
    transform: translate3d(0,-2px,0); 
} 

下面是上面代碼的jsfiddle和玩：https://jsfiddle.net/b0byf4by/1/

Answer 2

我認爲箱影物業將是最好的方式;有一個透視屬性可能可以做到這一點，但它可能是矯枉過正。

使用javascript添加一個類（在mouseover上），該類爲該特定的div添加了一個box陰影。

這裏有幾個環節，讓您開始：

http://www.w3schools.com/jsref/event_onmouseover.asp http://www.w3schools.com/cssref/css3_pr_box-shadow.asp