简单的css3动画

<a href="#" class="mai">
    <div class="two"></div>
</a>

 

<style>
.mai {
    display:block;
    width:300px;
    height:300px;
    background:#FC9;
    position:relative;
    overflow:hidden;
}
.mai .two {
    background-color:#F90;
    height: 100px;
    width:300px;
    left: 0;
    position: absolute;
    top:-100px;
    transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
        -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(0deg);
        
    transform-origin: 0 0 0;
        -webkit-transform-origin: 0 0 0;
        
    transition: transform 0.2s ease-in 0s;
        -webkit-transition: -webkit-transform 0.2s ease-in-out 0s;

    z-index: 2;
}
.mai:hover .two {
    transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
        -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotate(0deg) scale(1, 1) skewX(0deg) skewY(12deg);
        
    transform-origin: 0 0 0;
        -webkit-transform-origin: 0 0 0;

        
    transition: transform 0.2s ease-in 0s;
        -webkit-transition: -webkit-transform 0.2s ease-in-out 0s;
}

</style>