Image Flip Effect with Pure CSS 3D Transform

In this article, we will explore the amazing capability of one of the CSS3 properties3D Transform. And in the process, we will create an image flip effect with pure CSS. Initially you will see an image and as you roll over your mouse on it, it will flip and the image title and description will appear on the other side.

The aim of this article is to give you the overview of 3D Transform property of CSS3 and encourage you to start using it. This is because now most of the latest browsers support 3D transform and you can create amazing effects just with a few lines of code. Of course, the older browsers will not support it but you can always work on to provide acceptable degrade solution and get going.

So, before we move on, I am sure you would like to have a look what we are going to create in the process.

Image Flip Effect with Pure CSS

If the effect does not work in your browser, make sure to download and use the latest version of Firefox or Chrome. For doing experiments, I will suggest you to download the files which is available at the end of this tutorial in a zip file.

Let’s have first the basic know-how of 3D transform property.

CSS 3D Transform

We are used to look at the web as 2D and till now have been playing around with width, height, angles, etc. But 3D has come up with an exciting new possibility in web design. Although still experimental, it promises a complete new chapter in how we provide interactive user interface.

image-flip

The 3D Transform in CSS3 is not new; you have been using it already. It is the same CSS transform property which we use for 2D transform functions like rotate, translate or skew. Similar to 2D, there are several functions and values in 3D transform also such as rotate, translate, scale, perspective, back face visibility and preserve 3D.

For this example, we will use the following:

  • rotate
  • perspective
  • backface visibility
  • preserve 3D

So, before moving on, let me give you a brief description for each of these.

Rotate

The rotate functions does exactly what it means – rotates the element along defined axis. There are three rotate functions – rotateX(), rotateY() and rotateZ(). All these functions accept the values in degrees. But here is a catch – rotateX will not rotate the element in X direction but it will rotate the element along X direction. In 3D transform, X axis is in the horizontal direction (left to right) on screen, Y is in vertical direction (bottom to top) and Z is perpendicular to the screen (towards you). So, if you define the rotateX angle, it will actually flip in vertical direction along the X axis. In our example, we will use rotateY which will flip the element in horizontal direction. For getting the rotation what you get in 2D, use rotateZ.

Ex: – transform: rotateY(45deg)

As I already explained, 3D transform is still considered experimental. So, don’t do what I have done in the example above (for simplicity) and do use vendor prefixes like -moz-transform and -webkit-transform always.

Perspective

For adding the 3D depth in an element, you need to define perspective.  Perspective takes only one value in pixel like this.

perspective = 800px;

If you keep the value of perspective lesser, the 3D will be more eminent. Consider perspective as the distance of the object from you. Nearer you are to the object, deeper is the 3D perception. And it is always suggested to define this property with the parent element. If it is not done, all the child elements will have different perspectives and the effect will not look uniform.

Try to put the perspective values as 200px and 2000px to see how the effect behaves.

Back face Visibility

In some conditions like ours, we need to give a rotation of the object more than 180 degrees. In that case, you can use the backface-visibility property. This property actually defines whether or not the element should be visible if it is not facing the screen. By default the element will be displayed in reverse. If we pass the value “hidden” with backface-visibility, the element will not be visible.

Preserve 3D

If you define the perspective, it will be applicable to the parent and all the direct children. But in most of the cases, we would like to have the same perspective to all the subsequent children also to ensure that all the elements appear in the same 3D space. For achieving this, we define the transform-style as preserve-3d like this.

transform-style = preserve-3d;

Now, if you don’t want to have all the elements having same perspective (same 3D space), you can define transform-style as “flat”.

Well, I am stopping the theories here because my idea is to get you going. There are quite a handful of functions and values available in 3D transform, explore and learn them all!

Creating the Image Flip Effect

Now let’s create the image flip effect. As always, I will first show you the simple HTML markup used in this example.

<div class="contents">
    <div id="pic-desc">
        <div>
            <img src="...." />
        </div>
        <div>
            Image description here
        </div>
    </div>
</div>

Here, we are using the “contents” class as a wrapper to have the uniform margin and align the contents centrally. Inside the contents div, we have a division with id “pic-desc” which is the parent element of 3D transform. Inside the “pic-desc” division, there are two divisions – one for displaying picture and other for displaying the description of this picture. Nothing complicated!

Let’s move on the interesting CSS part.

For center aligning the contents division, the width is defined as 500px and margin is set to auto.

.contents
{   
    width: 500px;
    margin: 50px auto;
}

Now, let’s see the CSS of pic-desc division which is the parent element. For the sake of simplicity, I will remove the vendor prefixes here but in the downloaded file, you will find these.

#pic-desc
{
    margin-top: 50px;
    position: absolute;   
    perspective: 900px;  
    transform-style: preserve-3d;
}

Here, there are two CSS3 transform properties – perspective and transform-style. As I discussed earlier, it is better to define the perspective in the parent element and set the transform-style to preserve-3d. This ensures that all the child and sub-child elements remain in the same 3D space.

After this we will define the common styles for both “picture” and “description” divisions.

#pic-desc .picture, #pic-desc .description
{ 
    background-color: #F2F2F2;
    padding: 10px;
    width: 500px;
    height: 250px;
    position: absolute;
    transition: transform 1s ease-in-out;   
    backface-visibility: hidden;
    box-shadow: 0px 25px 19px -18px #545454;   
}

Here, apart from common CSS properties like background-color, padding, width and height; we are also setting the position to absolute. This makes both these divisions sit at the same place. To give a time delay of one second during rotation, we are using CSS3 transition property. As discussed earlier, we are setting the backface-visibility property to hidden for hiding the reverse element to appear when it is not facing the screen. The last thing is to provide a cool shadow effect with CSS3 box-shadow property. Note the vertical offset and negative spread values of box-shadow for getting the bottom shadow. You may like to go through CSS3 box-shadow property to learn the details and box-shadow generator to generate amazing shadows.

Initially, we want to display the image in front and description will be behind it. So, we will give a rotation of 180 degrees to the description with rotateY function.

#pic-desc .description
{   
    transform: rotateY(-180deg);
}

Here the angle is defined in negative. We will explain it in a moment. Now, as we move our pointer to the pic-desc division, the rotation angles of both picture and description should change.

#pic-desc:hover .description
{  
    transform: rotateY(0deg);
}

#pic-desc:hover .picture
{   
    transform: rotateY(180deg);   
}

The description rotates from -180 degrees to 0 degree and in turn picture rotates from 0 to 180 degrees keeping the direction of ration same. That is why we have defined the initial value of rotateY for description as -180 degrees.

That’s all my friends! I am sure you find this tutorial easy and the example easy to implement. But this is just the beginning. There is a lot to do with 3D transform and it’s time for you to get in!

Feel free to save the html and css files from the demo page and use wherever you want. All the files including images used in this example is available in a zip folder to download here.

Download Image Flip Effect Files

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>