自动翻转html,css--图片翻转二：自动翻转


**原理：**

利用@keyframes动画效果实现自动翻转

//

//

html

~~~

~~~

css

~~~

.container {

position: relative;

}

.container img {

width: 250px;

height: 250px;

vertical-align: bottom; //使图片从底部对齐，不会有缝隙

}

.front, .back {

position: absolute;

top: 0;

left: 0;

backface-visibility: hidden;

}

/*---定义图片翻转动画---*/

@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)}

}

.front {

animation: toback 3s infinite;

}

.back {

animation: tofront 3s infinite;

}

/*---在外部加边框和阴影---*/

.front, .back {

border: 5px solid white;

box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);

}

~~~