css3-文字旋转

<meta charset="utf-8"/>
<style>
    * {margin: 0; padding: 0;}
    ul {
        height: 80px;
        background: #30C2A5;
        width: 290px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    li {
        list-style: none;
        float: left;
        margin-left: 5px;
        font: 30px/80px arial;
        color: #fff;
        animation: one 2s infinite;
    }
    li:nth-child(1){animation-delay:0.1s;}
    li:nth-child(2){animation-delay:0.2s;}
    li:nth-child(3){animation-delay:0.3s;}

    @keyframes one{
        0%{transform:rotateY(0)}
        100%{transform:rotateY(360deg)}
    }
</style>
<ul>
    <li>大</li>
    <li>家</li>
    <li>好</li>
</ul>