如何在鼠标悬停时将div动画为3d

Question

我希望我的div在悬停在它上面时以3d方式弹出。请有人帮忙。我喜欢它在vanilla 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

我认为 box-shadow属性是最好的方式;有一个透视属性可能会这样做，但它可能有点过分。

使用javascript添加一个类（在鼠标悬停时），为该特定div添加一个框阴影。

以下是一些可以帮助您入门的链接：

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp List<T>