2015-02-08 52 views
0

我知道這是一定程度的JavaScript,但我知道如何去做,儘管知道它的合理數量並不是我所知道的。琳達的瓷磚如何製作?

首先,懸停翻轉動畫,這不能是一個CSS開關,因爲我從來沒有看到過渡相當喜歡它。

+0

好的,所以我訪問了Lynda.com的Chrome,我右鍵單擊了所選的「檢查元素」,並看到「翻轉容器」是指派給正在翻轉的元素的CSS類。然後我搜索了「翻轉容器」。第一個命中是這個職位:http://davidwalsh.name/css-flip。 – ktamlyn 2015-02-08 11:40:41

+0

上述過程並不總是會產生如此好的結果,但它確實是在發佈到Stackoverflow之前將您的工作合理化爲合理的第一步。 – ktamlyn 2015-02-08 11:45:10

回答

1

做這種檢查自己很容易。在這種情況下,它是CSS,所以只需打開瀏覽器控制檯並檢查該元素會告訴你,有兩個元素,.front.back絕對位置在上面,動畫是transform:rotateY(180deg)一起懸停以及transition: all 0.6s ease 0s緩慢它下降。

如果您試圖找出JS動畫,請了解如何使用JS斷點。你也可以關於DOM屬性的改變,這對大多數涉及到一些CSS或類的變化的動畫都是有用的。

要了解更多信息,請訪問http://davidwalsh.name/css-flip