效果
一个大小的两个面,在同一位置上
正面的Y轴旋转为0度
背面的Y轴旋转180度
隐藏被旋转的 div 元素的背面(backface-visibility)
点击的时候同时改变正面和背面的旋转角度,给一个动画的时间(transition)
记得换图片路径哦~
css3 翻牌* {
margin: 0;
padding: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.flip-container,
.front1,
.back1 {
width: 283px;
height: 283px;
}
.front1,
.back1 {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: 0.6s ease-out;
-webkit-transition: .6s ease-out;
transf