圖像鏈接翻轉效果

Question

有人知道如何使圖像鏈接翻轉效果類似於此處看到的嗎？ 也許有一個教程嗎？ 改變背景的不透明度並使眼睛看起來很容易，但是我不知道開發者是如何讓奶酪輪那樣滑動的。

屏幕截圖：

Answer 1

這是兩件事的結合：

一種是更改懸停時的楔形位置（在CSS中）。 我想你知道該怎么做。

另一個（創建動畫的一個）正在指定過渡時間，以便它可以從一種狀態平穩過渡到另一種狀態。

有關過渡如何工作的更多詳細信息，請參見http://www.w3schools.com/css3/css3_transitions.asp 。

不幸的是，跨瀏覽器的支持很差，並且每個瀏覽器都使用自己的前綴。 您指向的站點使用：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;`