css 卡片翻转效果,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：隐藏被旋转的 p 元素的背面

相关推荐：

CSS33D翻转相册

基于css3的文字3D翻转特效_html/css_WEB-ITnose

CSS3-3D翻转_html/css_WEB-ITnose