内容简介：CSS3实现卡片翻转动画效果
今天写项目的时候，想要实现卡片翻转的这样的一个效果，学习了一下，做个小笔记吧。
还是先放效果图，或者点击这里查看效果
实现
html
还是先放效果图，或者点击这里查看效果
<div class="box"> <div class="card front"></div> <div class="card back"></div> </div>
css
body{
perspective: 1000px;
}
.box{
margin: 50px auto;
width: 239px;
height: 334px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card{
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
}
.front{
background-image: url(1.jpg);
background-position: -24px -23px;
}
.back{
transform: rotateY(180deg);
background-image: url(1.jpg);
background-position: -287px -23px;
}
.flipped{
transform: rotateY(180deg);
}
js
$(".box").hover(function(event){
$(this).toggleClass("flipped");
})
关键说明
preserve-3d
因为需要3d效果，所以在box这个div里要添加如下，表示3d透视
这个加上很关键！
transform-style: preserve-3d;
backface-visibility
给卡片加入下方代码，表示隐藏被旋转div元素的背面，这样旋转之后，第一张卡片是背面朝屏幕方向，看不到，第二张卡片旋转之后则是正面朝像屏幕，即形成了旋转的效果，主要用到这两个属性啦。
backface-visibility:hidden
rotateY()
这里的旋转都是绕着Y轴旋转，比较好理解。
恩，就是这样，比较简单啦。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
计算机程序设计艺术（第2卷）
Donald E. Knuth / 苏运霖 / 国防工业出版社 / 2002-8 / 98.00元
本书是国内外业界广泛关注的7卷本《计算机程序设计艺术》第2卷的最新版。本卷对半数值算法领域做了全面介绍，分“随机数”和“算术”两章。本卷总结了主要算法范例及这些算法的基本理论，广泛剖析了计算机程序设计与数值分析间的相互联系，其中特别值得注意的是作者对随机数生成程序的重新处理和对形式幂级数计算的讨论。 本书附有大量习题和答案，标明了难易程度及数学概念的使用。 本书内容精辟，语言流畅，引人入胜，可供从......一起来看看 《计算机程序设计艺术（第2卷）》 这本书的介绍吧!
