实现卡片3D翻转效果

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

效果：

代码：

html：

<p class="main">    <p class="box b1"></p>    <p class="box b2"></p>  </p>

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 元素的背面

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

h5实现多图片预览上传及点击可拖拽控件

前端技术实现文本文字纹理叠加

以上就是实现卡片3D翻转效果的详细内容，更多内容请关注技术你好其它相关文章！