实现卡片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 元素的背面

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

推荐阅读：

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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！