如何用css3实现卡片3d翻转翻面

下面我要说的是一个什么效果呢？

例如我们看到的一种人物卡牌，卡牌的前面是人物形象，后面是人物技能。我们今天要做的效果就是卡片的3D翻转翻面。
鼠标放在卡片上面卡片翻面，可以看到反面的文字等，正面 的图片就看不到了。

贴代码：
html部分：

<div class="courseLogo"><div class="courseBefore" style="background-image: url(img/bks.png);">div><div class="courseAfter">测试文字，测试文字，测试文字，测试文字，测试文字，测试文字div>
div>  

css部分

.courseLogo{width: 120px;height: 132px;float: left;margin-top: 1px;position: relative;box-sizing: border-box;perspective: 800px;
}.courseBefore{width: 100%;height: 100%;position: absolute;top:0;left: 0;background-repeat: no-repeat;background-position: center center;backface-visibility: hidden;transition: 1s;background-color: pink;}
.courseAfter{width: 100%;height: 100%;position: absolute;top:0;left: 0;color: #fff;background-color: dodgerblue;text-indent: 2em;transform: rotateY(-180deg);backface-visibility: hidden;transition: 1s;}.courseLogo:hover .courseBefore{transform: rotateY(180deg);
}
.courseLogo:hover .courseAfter{transform: rotateY(0deg);
}

下面说一下重点：
backface-visibility: hidden;这个属性的作用就是翻转过去的内容被隐藏了，所以我们只能看到一个面的内容。就达到了一个卡片2个面切换显示。
transform: rotateY(-180deg);这个是css3的翻转功能，但是要想实现3d效果还要加上景深perspective: 800px;
下面是效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！