如何实现这种“提升”效果？ [关闭]

Posted 2023-05-08

【中文标题】如何实现这种“提升”效果？ [关闭]

【英文标题】：Anyone know how to achieve this "lift" effect? [closed]有谁知道

【发布时间】：2013-03-07 09:07:26

【问题描述】：

我正在查看新 Teehan + Lax 网站的 story page 并在 hover of these images. 上看到了这种甜蜜的效果（您必须向下滚动几乎到页面底部）。任何人都知道这将是多么容易实施？或者如果有一个插件可以做类似的事情？

谢谢！

【问题讨论】：

添加一个带有变换和阴影的类，并在悬停时对其进行动画处理。

看页面源码就行了。

【参考方案1】：

.tl-site #making-tl .card .front:hover 
    transform: rotateX(10deg);

.tl-site #making-tl .card .front 
    transform-origin: 8px 8px 0;
    transform-style: preserve-3d;
    transition-duration: 0.75s;

【参考方案2】：

是的

-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
transform: rotateX(10deg);