用CSS实现图片翻转的动画效果
.back, .front, .rotate-container{ width: 320px; height: 380px; margin: 0 auto; text-align: center; color: #00f; } .flipper { transition-duration: 1s; transform-style: preserve-3d; position: relative; } .rotate-container.hover .flipper,.rotate-container:hover .flipper { transform: rotateY(180deg) } .back, .front { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { transform: rotateY(180deg); } .rotateY{ transition-duration:1.5s; } .rotateY45:hover{ transform: rotateY(45deg); } .rotateY90:hover{ transform: rotateY(90deg); } .rotateY180:hover{ transform: rotateY(180deg); } .bf-hidden{ transform-style: