IE Test

by Anupama

HTML

<div class="box niuAnimate"></div>

CSS

.box {
    width:200px;
    height:200px;
    background-color:#cacaca;
    margin:auto;
    /*transform:perspective(500px) rotateY(10deg);*/
}
.niuAnimate {
    animation:rotateIn 2s linear 1;
    -webkit-animation:rotateIn 2s linear 1;
    -ms-animation:rotateIn 2s linear 1;
    animation:rotateIn 2s linear 1;
}
@-ms-keyframes rotateIn{
    0% {
        -ms-transform: perspective(400px) rotateY(180deg);
        opacity:0;
        /*progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
    }
    50% {
        -ms-transform: perspective(400px) rotateY(10deg);
    }
    70% {
        -ms-transform: perspective(400px) rotateY(-10deg);
    }
    100% {
        -ms-transform: perspective(400px) rotateY(0deg);
        opacity:1;
    }
}
@keyframes rotateIn{
    0% {
        transform: perspective(400px) rotateY(180deg);
        opacity:0;
    }
    50% {
        transform: perspective(400px) rotateY(10deg);
    }
    70% {
        transform: perspective(400px) rotateY(-10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity:1;
    }
}