testtest
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container, .container.one, .two{
width: 100px;
height: 100px;
}
.container{
position: relative;
transition: 1s;
transform-style: preserve-3d;
}
.one{
position: absolute;
top: 0;
background: red;
transform: rotateY(180deg);
backface-visibility: hidden;
}
.two{
position: absolute;
top: 0;
background: yellow;
backface-visibility: hidden;
}
隐藏在背后的元素
初始显示在前面的元素
点击反转
$(() => {
$("#btn").click(() => {
if($(".container").attr("style") == undefined){
$(".container").css("transform","rotateY(180deg)");
}else{
$(".container").removeAttr("style");
}
});
})
欢迎关注小程序,感谢您的支持!