ulli*3 实现翻书动画效果

按惯例，上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 实现翻书动画效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。