ul li 3 實現翻書動畫效果

按慣例，上gif：

重現：codepen.io/anon/pen/jj…

這是我今天參加面試時候，面試官讓我做的一道題，面試官坐我旁邊看我現場做，然而我比較菜，回來後才做出來……

來看看html部分：

由於li是inline-block元素，所有沒有寫li的閉合，寫了的話每個li之間會有4px的間距，不寫瀏覽器也會自動補全。

css部分

body 

ul li 
.anim 
@keyframes anim 
}.anim2 
@keyframes anim2 
to }
複製**

這個動畫效果的實現，主要靠是perspective + rotatey的應用，我面試時寫了rotatey，但是不知道perspective，所以做了很久沒做出立體效果來，後來面試官提示了我這個屬性，我回來後才做了出來。

對於這公司出的這面試題，其實我覺得挺坑的，我覺得只有做過這動畫的人才能當場做出來。

還有一道js題，光描述就賊複雜，就不放出來了，今天的面試應該是掛了，哈哈。

最後，深圳南山，求職呀~

ul li 3 實現翻書動畫效果

按慣例，上gif 重現 這是我今天參加面試時候，面試官讓我做的一道題，面試官坐我旁邊看我現場做，然而我比較菜，回來後才做出來 來看看html部分 由於li是inline block元素，所有沒有寫li的閉合，寫了的話每個li之間會有4px的間距，不寫瀏覽器也會自動補全。css部分 body ul l...

翻書動畫實現

最近利用空餘時間實現了一下翻書的動畫 主要利用了3個方面的東西 1 canvas的clip方法 2 設定path路徑，這其中包括了bezier函式的理解 3 繪圖原理參考 此大神 廢話不多說，直接原始碼吧 import android.animation.animator import androi...

CSS3 實現翻書效果

body ulul li一般3d層給實現3d效果的父盒子，視距給最大的盒子body。在給子元素設定旋轉角度過程中，使用偽類選擇器可以減少記憶體的占用，這裡使用到 nth child 偽類。主要css 如下 ul hover li nth child 1 ul hover li nth child 2...