html css匀速旋转,两面旋转 · HTML-CSS · 看云

~~~

.container{

width: 300px;

height: 300px;;

margin:100px auto;

position: relative;

}

.container>div{

transition: all 2s;

position: absolute;

height: 300px;

width:300px;

backface-visibility: hidden;

}

.front{

background: plum;

animation: toback 2s infinite;/*自动重复动画 */

}

/* .back{

transform: rotateY(-180deg);

}

.container:hover .front{

transform: rotateY(180deg);

}

.container:hover .back{

transform: rotateY(0deg);

} */

.back{

height: 300px;

background: pink;

animation: tofront 2s infinite;/*自动重复动画 */

}

@keyframes toback{

0%{transform: rotateY(0deg);}

50%{transform: rotateY(180deg);}

100%{transform: rotateY(360deg);}

}

@keyframes tofront{

0%{transform: rotateY(-180deg);}

50%{transform: rotateY(0deg);}

100%{transform: rotateY(180deg);}

}

~~~

~~~

~~~

效果图如下：