今天博主给小伙伴们分享的是CSS3之翻牌效果！
直接贴代码：
<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < meta http-equiv= "X-UA-Compatible" content= "ie=edge" > < title >Document </ title > < style > .box{ position: relative; width: 300px; height: 500px; margin: 30px auto; perspective: 500px; } .pai{ transition: 3s; transform-style: preserve-3d; background-color: yellow; } .pai,.z,.f{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .z{ background: url( 6.jpg) center center / cover no-repeat ; transform: translateZ( 10px); } .f{ background: url( 7.jpg) center center / cover no-repeat ; transform: translateZ( -10px) rotateY( 180deg) ; } .box:hover .pai{ transform: rotateY( 180deg); } < / style > </ head > < body > < div class= 'box' > < div class= "pai" > < div class= "z" ></ div > < div class= "f" ></ div > </ div > </ div > </ body > </ html >效果图如下：由于是动态的，，只能截图说了
好了，，，，今天的分享就到这里了！
