Card Flip

卡牌效果：O(∩_∩)O，只做了webkit浏览器的效果，请用chrome~

1、首先呢，先用一个框框把卡牌包住，然后呢，搞两个子元素作为卡牌正反面。当然咯，反面是看不见滴~

<section class=wrap>
    <div class="face front">Lisen to  me</div>
    <div class="face back">Yes, I will</div>
</section>

 

2、然后就开始写CSS做变换了。

.wrap {
    width: 250px;
    height: 400px;
    -webkit-perspective: 1200;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
}
.wrap:hover {
    -webkit-transform: rotateY(180deg);
}
.back {
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
    -webkit-transform: rotateY(180deg);
}
.front {
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(90deg, #b01c20 0%, pink 100%);
}

CSS代码详解：

1、.wrap作为外围框的类，需要设置3D视野perspective，美术渣渣表示不懂这个属性，但是经过实验，个人偏好数值比较大。然后要设置3D变换transform-style。最后设置3D变换过渡的时间，即transition属性。

2、.face作为卡牌正反面的类，需要设置position:absolute，好让第二个子元素脱离文档流，否则第二个子元素会被放在第一个子元素之后。然后设置背面的元素不可见。

3、.back作为背面的卡牌，首先呢，它得在逆时针旋转180deg。我把.face的backface-visibility属性去掉，然后我们可以看到旋转的效果。