web开发中实现卡片3D翻转效果的方法-创新互联

小编给大家分享一下web开发中实现卡片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 元素的背面

看完了这篇文章，相信你对web开发中实现卡片3D翻转效果的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

文章名称：web开发中实现卡片3D翻转效果的方法-创新互联
网页地址：http://cdkjz.cn/article/cejicc.html