这篇文章给大家分享的是“CSS3如何做卡片翻转效果，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

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

效果：

代码：

html：

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

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

以上就是关于“CSS3如何做卡片翻转效果，代码是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中清除左右浮动的方法是什么

  在css中，可以利用clear属性清除左右浮动，该属性的作用就是规定元素的哪一侧不允许其他浮动元素，当属性的值为“both”时，在元素的左右两侧均不允许浮动元素，也就是清除左右浮动，语法为“元素{clear:both;}”。

• 在CSS中用transform方法怎么做跑马灯效果，代码是什么

  这篇文章主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• css控制元素高度实现自底向上和自顶向下的方法

  这篇文章主要介绍了css控制元素高度实现自底向上和自顶向下的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS中做可控虚线的方法是什么，有何技巧

  这篇文章主要介绍了css实现可控虚线的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

• HTML5有什么用，有什么好处

  html5是什么？有什么用？这个问题对于一些刚接触到前端学习的朋友来说肯定是会来问的，那么下面php中文网就给大家来说一说html的概念以及html5可以用来做什么。