CSS实现卡片3D翻转效果的示例代码

  发布时间:2018-03-06 14:18:22   作者:hester灬   我要评论
本篇文章主要介绍了CSS实现卡片3D翻转效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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麻将筛子3D翻转特效的实例教程

    这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程,css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程
    2014-12-31
  • css3实现3D色子翻转特效

    这篇文章主要介绍了css3实现3D色子翻转特效的制作过程及示例代码,非常的不错,效果也非常棒,这里推荐给大家。
    2014-12-23
  • css3的图形3d翻转效果应用示例

    这篇文章主要介绍了css3 的图形3d翻转效果应用,需要的朋友可以参考下
    2014-04-08
  • 简单几步用纯CSS3实现3D翻转效果

    这篇文章主要介绍了简单几步用纯CSS3实现3D翻转效果的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-17

最新评论