CSS3实现卡片翻转动画效果

前言

今天写项目的时候,想要实现卡片翻转的这样的一个效果,学习了一下,做个小笔记吧。

还是先放效果图,或者点击这里查看效果
1.gif

实现

html

1
2
3
4
<div class="box">
<div class="card front"></div>
<div class="card back"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

1
2
3
$(".box").hover(function(event){
$(this).toggleClass("flipped");
})

关键说明

preserve-3d

因为需要3d效果,所以在box这个div里要添加如下,表示3d透视
这个加上很关键!

1
transform-style: preserve-3d;

backface-visibility

给卡片加入下方代码,表示隐藏被旋转div元素的背面,这样旋转之后,第一张卡片是背面朝屏幕方向,看不到,第二张卡片旋转之后则是正面朝像屏幕,即形成了旋转的效果,主要用到这两个属性啦。

1
backface-visibility:hidden

rotateY()

这里的旋转都是绕着Y轴旋转,比较好理解。

恩,就是这样,比较简单啦。