Lynda 上的瓷砖是如何制作的?

How are the tiles on Lynda made?

我知道这是某种程度的 JavaScript,但尽管我知道的相当多,但我还是不知道该怎么做。

首先,悬停翻转动画,它不能是 CSS 开关,因为我从来没有见过这样的过渡。

自己进行这种检查非常容易。在本例中它是 CSS 所以只需打开浏览器控制台并检查该元素就会告诉您有两个元素,.front.back 绝对位于彼此之上,并且动画是悬停时的 transform:rotateY(180deg) 和减慢速度的 transition: all 0.6s ease 0s

如果您曾经想搞清楚 JS 动画,请学习如何使用 JS 断点。您还可以中断 DOM 属性更改,这对于涉及某些 css 或 class 更改的大多数动画很有用。

要了解更多信息,请访问 http://davidwalsh.name/css-flip