Introduction
In this article we will focus on 3D rotation of an element using transform, perspective, rotate, backface-visibility and transition properties of CSS3 that will look like a flipping card effect. The rotation of an element is possible due to CSS3, so it will work on all the latest browsers. First we will discuss a little about the properties responsible for 3D rotation.
transform: The CSS transform property allows us to modify the coordinate space of the CSS visual formatting model. Elements can be translated, rotated, scaled and skewed depending on the values set.
perspective: To activate 3D space, an element needs perspective. This can be applied in one of the following two ways:
- perspective as a functional notation
transform: perspective( a);
a is the value in px like 500px
- perspective property
perspective: 500px;
The functional notation is convenient for directly applying a 3D transform on a single element. But when used on multiple elements, the transformed elements don't line up as expected. If you use the same transform across elements with different positions, each element will have its own vanishing point. So, as a solution use the perspective property on a parent element, so each child may share the same 3D space.
rotate(): It defines a transformation that moves the element around a fixed point without deforming it.
Syntax: rotate(a)
a is the angle representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. A rotation by 180° is called point reflection.
backface-visibility: There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). With 3D transforms, we can rotate an element so we want the "front" of an element no longer displayed on the screen.
transition: It controls the speed of animation when changing CSS properties. Instead of having property the changes take effect immediately, we can change in a property to take place over a period of time. We can specify which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration) and how the transition will run (by defining a timing function, for example linearly or quick at the beginning, slow at the end).
Animations that involve transitioning between two states are often called implicit transitions since the states between the start and final states are implicitly defined by the browser.
Example
The following example shows a fruit image on mouse over of the color div. You can add any image for testing purposes. A practical implementation of this example is for small kids when they mouse over a color they will get a fruit image of that color.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Flip</title>
- <style type="text/css">
- .flip3D{width:240px; height:200px; margin:10px; float:left;}
- .flip3D > .front{
- position:absolute;
- transform:perspective(600px) rotateY(0deg );
- background:red; width:240px; height:200px; border-radius:7px;
- backface-visibility:hidden;
- transition: transform .5s linear 0s;
- }
-
- .flip3D > .back{
- position:absolute;
- transform:perspective(600px) rotateY(180deg );
- background:white; width:240px; height:200px; border-radius:7px;
- backface-visibility:hidden;
- transition: transform .5s linear 0s;
- }
-
- .flip3D:hover > .front{
- transform:perspective(600px) rotateY(-180deg);
- }
-
- .flip3D:hover > .back{
- transform:perspective(600px) rotateY(0deg);
- }
-
- #div1
- {
- background: Red;
- }
- #div2
- {
- background :Blue;
- }
- #div3
- {
- background :Yellow;
- }
- #div4
- {
- background :Green;
- }
- #div5
- {
- background :Black;
- color:white;
- }
-
- div p
- {
- font-weight:bold;
- font-size:20px;
- vertical-align: middle;
- text-align: center;
- }
-
- img
- {
- background:white;
- width:240px;
- height:200px;
- border-radius:7px;
- }
- </style>
- </head>
- <body>
- <div class="flip3D">
- <div class="back"><img src="apple.jpg" /> </div>
- <div class="front" id= "div1"><p>Red Color</p></div>
- </div>
- <div class="flip3D">
- <div class="back"><img src="blueberry.jpg" /> </div>
- <div class="front" id= "div2"><p>Blue Color</p></div>
- </div>
- <div class="flip3D">
- <div class="back"><img src="banana.jpg" /></div>
- <div class="front" id= "div3"><p>Yellow Color</p></div>
- </div>
- <div class="flip3D">
- <div class="back"><img src="Guava.jpg" /></div>
- <div class="front" id= "div4"><p>Green Color</p></div>
- </div>
- <div class="flip3D">
- <div class="back"><img src="jamun.jpg" /></div>
- <div class="front" id= "div5"><p>Black Color</p></div>
- </div>
- </body>
- </html>
Result
We can see the flip effect on each square color. I am sharing a screen shot. When we mouse over the Green color the following changes in the browser can be seen.
Note: These are properties of CSS3 and work in the latest browsers. For different browsers you can prefix the property.
![CSS 3 Design in Web Browser]()
![CSS Design in Web Browser]()