按慣例，上GIF：

重現：https://codepen.io/anon/pen/JJBxOm

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

來看看HTML部分：

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

CSS部分

body {text-align: center;}ul {background: gray;width: 100%;padding: 20px;-webkit-perspective: 200;}li {list-style: none;height: 50px;width: 100px;padding: 0;margin: 0;display: inline-block;background: white;border-radius: 2px;}.anim {animation: anim 1s infinite;width: 100px;margin-left: -100px;background: white}@keyframes anim {to {transform: rotateY(-360deg);}}.anim2 {animation: anim2 1s infinite;width: 100px;margin-left: -100px;background: white}@keyframes anim2 {25% {transform: rotateY(0deg);}to {transform: rotateY(-360deg);}}

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

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

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

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

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ulli*3 实现翻书动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。