如何用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;
下面是效果图：