html翻转卡片的效果,CSS实现卡片3D翻转效果的示例代码

本文介绍了CSS实现卡片3D翻转效果的示例代码，分享给大家，具体如下：

效果：

代码：

html：

css：

.main {

position: absolute;

top: 50%;

left: 50%;

width: 300px;

height: 300px;

transform: translate(-50%,-50%);

-webkit-perspective: 1500;

-moz-perspective: 1500;

}

.box {

position: absolute;

top: 0;

left: 0;

width: 300px;

height: 300px;

transition: all 1s;

backface-visibility: hidden;

border-radius: 10px;

cursor: pointer;

}

.b1{

background:skyblue;

}

.b2 {

background:tomato;

transform: rotateY(-180deg);

}

javascript：

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)";

}

-webkit-perspective：透视效果

backface-visibility：隐藏被旋转的 div 元素的背面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。