这个网站首页的banner动态效果是如何实现的

Question

地址：http://www.smartisan.com/#/

中间那个banner，鼠标移动到任意位置，banner会出现一些浮动，单纯用CSS3能实现吗？还是需要用到某些插件？

Answer 1

1:需要js配合来做

2:最简单的用个插件 hover3D http://www.jq22.com/jquery-in...

Answer 2

很简单啊，就一个hover效果再加上transform

Answer 3

需要JS配合下吧 当鼠标在四个角上的时候动态调整skew 或者可以在四个角的地方放四个透明的div

Answer 4

单纯用CSS3能实现吗？

不能。

还是需要用到某些插件？

自己写 js 。

Answer 5

给图片在z轴排序，动效应该根据js判断，适当的旋转。

Answer 6

transform: rotateX(45deg) rotateY(45deg);
确定X轴和Y轴旋转角度（压力大小）
transform-origin:25% 25%;
确定旋转原点（压力位置）

通过js的mouseover和mousemove动态获取旋转原点实现动态的指压效果

表面突出的效果应该是两张图片的旋转角度不一样

Answer 7

js监听鼠标hover事件，改变元素的旋转角度，想要做到它的效果需要自己多尝试