实现点击卡片3D旋转效果
<div class="main">
<p class="box b1">123</p>
<p class="box b2">456</p>
</div>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
transition: all 1s;
backface-visibility: hidden;
border-radius: 10px;
cursor: pointer;
}
.b1 {
background: #ffd800;
}
.b2 {
background: #808080;
transform: rotateY(-180deg);
}
</style>
<script>
var b1 = document.querySelector(".b1");
var b2 = document.querySelector(".b2");
b1.onclick = function () {
b1.style.transform = "rotateY(180deg)";
b2.style.transform = "rotateY(0deg)";
}
b2.onclick = function () {
b2.style.transform = "rotateY(-180deg)";
b1.style.transform = "rotateY(0deg)";
}
</script>
