Computer scienceFrontendCSSAnimation

Transitions

Theory

Flip Card

Report a typo

You can create very cool animations by combining transition and transform lot's of which can be found on the internet.

In this exercise, you will learn how to create a flip effect on a card using only transition and transform.

For the flip effect to work you need to use rotateY() together with transform. This property rotates the element on its vertical axis. For example, rotateY(10deg) will rotate the element 10 degrees on its vertical axis.

The idea behind this effect is to have two elements in the same position.
The elements .front and .back will have their back side hidden. The element with the .back class starts by default rotated half a turn on its vertical axis.
When hovering the mouse over the .card container the two elements .front and .back will rotate at the same time, thus making the back element visible and the front element hidden.

These are the tasks you should complete for the card element:

  • Add a two-second transition, using any of the time functions.
  • Use the property transform-style: preserve-3d for the effect to work properly in 3D space.
  • On the hover event use transform: rotateY(Ndeg) so that the effect works. (N represents the number.)
  • The element needs to make a half turn around its vertical axis, (one turn is 360deg).

For the front and back elements:

  • Use the property backface-visibility to hide the back side of both elements.
  • Set the position to absolute.

For the back element:

  • Rotate the element on the vertical axis, using transform: rotateY(Ndeg).
  • The element must be by default rotated half a turn on its axis.
Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip The Language</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="front"><img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/python/python.png" /></div>
<div class="back"><p>Python</p></div>
</div>
<div class="card">
<div class="front"><img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png" /></div>
<div class="back"><p>Javascript</p></div>
</div>
</div>
</body>
</html>
Completed 4 of 7
Both cards have the correct position and properties; The hover event is applied to it.
The front element has the correct properties
___

Create a free account to access the full topic