内容简介：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轴旋转，比较好理解。
恩，就是这样，比较简单啦。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
