ul>li*3 实现翻书动画效果

Author Avatar
朱嘉伟 7月 07, 2017

按惯例,上GIF

GIF

重现:https://codepen.io/anon/pen/JJBxOm

这是我今天参加面试时候,面试官让我做的一道题,面试官坐我旁边看我现场做,然而我比较菜,回来后才做出来……

来看看HTML部分:

 <body>
     <ul>
         <li>
         <li class="anim">
         <li class="anim2">
     </ul>
 </body>

由于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题,光描述就贼复杂,就不放出来了,今天的面试应该是挂了,哈哈。

最后,深圳南山,求职呀~