HTML and CSS Reference
In-Depth Information
Another key property is the
perspecive
. It is defined in the container of the 3D
transformed elements. The higher a perspecive value is, the more distorion it creates
when it is rotated. The following figure shows how a card rotated in 45 degrees is
displayed in diferent perspecives. A suitable perspecive value creates a realisic 3D
illusion. The distorion looks strange when the value is too low. The efect looks lat
when the value is too high.
Toggling the flipping state
In this CSS-driven game, we use many CSS classes to act as a state. Take the flipping effect as
an example; we add a "lipped" state to the card, and at the same ime, the newly enabled CSS
style defined in the
.flipped
rules is applied to the card to create a lipping animaion. It is
actually more than just a styling. In the later tasks, we will query the cards with specific classes
to perform acions, such as selecing the lipped player's cards or the selected player's card.
Also, the beauty of using separated classes such as card and flipped is the ability to extract
common styles for each class category. In future tasks, we are going to have more classes
applied to the card, including the player, opponent, and selected classes.
