您的位置：首页 > Web前端 > CSS

css3实现卡片翻转

2015-09-13 20:34 756 查看

真的是好记性不如乱笔头，以前看过了css3实现卡片翻转，觉得简单，也就没做笔记，今天在写了，一头蒙啊。。

需要用到的css3:属性：

1、perspective:800px;景深：一般设给舞台，

2、transform-style：preserve-3d；3d场景，一般设给容器，也就是那个施加动画的元素

3、backface-visibility:hidden ;是否显示该选择元素旋转到背面后的样子

4、transform：rotateY（0deg）;元素绕Y轴旋转

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
#wrap {width: 600px;height: 600px;background: #ccc; margin: 0 auto;position: relative;perspective:800px;}
#box {position: absolute;left: 100px;width: 400px;height: 400px;border: 1px solid #000;transform-style:preserve-3d; transform-origin: right center;}
#box a {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-size: 28px; backface-visibility: hidden;color: #fff}
#box a:nth-of-type(1) {background: blue;transition:.8s transform}
#box a:nth-of-type(2) {background: red;transform:rotateY(-180deg);transition:.8s transform}
#box:hover a:nth-of-type(1) {transform:rotateY(180deg);}
#box:hover a:nth-of-type(2) {transform:rotateY(0deg);}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<a href="#" id="one">世界那么大</a>
<a href="#" id="two">我想去看看</a>
</div>
</div>
</body>
</html>