HTML and CSS Reference
In-Depth Information
}
/* card flipping related */
.card > .face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
backface-visibility: hidden;
transition: all 0.3s ease-out;
}
.card > .face.front {
background: #81d1e9 url(images/front-face.png);
transform: rotate3d(0, 1, 0, 0deg);
}
.card > .face.back {
background: #4474b5 url(images/back-face-pattern.png);
transform: rotate3d(0, 1, 0, 180deg);
border: 3px solid white;
}
.card.flipped > .face.front {
transform: rotate3d(0, 1, 0, -180deg);
}
.card.flipped > .face.back {
transform: rotate3d(0, 1, 0, 0deg);
}
3. The card-flipping effect requires only the HTML and CSS part. We use JavaScript
just to trigger the flipped state. We define the following JavaScript in the
gameScene.onShow
funcion, which is called when the scene appears:
gameScene.onShow = function() {
setTimeout(function() {
var cardA = document.querySelector('.card.a');
cardA.classList.add('flipped');
var cardB = document.querySelector('.card.b');
cardB.classList.remove('flipped');
}, 1000);
};
Keep in mind that the JavaScript we just added to this task in step 3 is to test the card-flipping
effect. We will be changing it in the next task.
