Post
Ask Question

CSS3 Flip 3D Effect

Introduction

The CSS3 Flip 3D Effect displays content on the front and back sides of elements when the user interacts with them.

To implement the CSS3 Flip 3D Effect we need to understand some properties of CSS3. Let's understand the properties and then we will see an example of the Flip 3D Effect.

  1. Margin: The margin properties define the space around elements.
  2. Float: The float property is used to specify whether or not a box should float.
  3. Position: Positions an element.
  4. Font Family: Defines a name.
  5. hover: How to style an element when we hover the mouse over it.
  6. webkit: The prefix for Chrome and Safari.
  7. transform: The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move, and/or skew elements. It is used with the prefix -webkit (for Chrome and Safari).
  8. perspective: The perspective property defines how many pixels a 3D element is placed from the view. It is only used for 3D transformed elements, it is used with the prefix -webkit (for Chrome and Safari).
  9. background: Sets properties such as background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
  10. color: Applies color on the text.
  11. border-radius: The border-radius property sets the four (top-left, top-right, bottom-right, bottom-left) border-radius properties for defining the shape of the corners.
  12. backface-visibility: This property is useful when an element is rotated and you do not want to see its backside.
    • backface-visibility: hidden=>The backside is not visible.
    • backface-visibility: visible=>The backside is visible.
  13. transition: The transition property applies the four transition properties transition-property, transition-duration, transition-timing-function, and transition-delay.

Example. For the practical implementation, we will create an example. In this example, I will create 4 Boxes using the CSS3 Flip 3D Effect.

It is useful in many places, depending on requirements it makes creative effects for the elements.

We can also use this type of filp3D box in a MenuBar by lacing images or icons at the front side and text like Home, About Us and/or Contact as the backside of the boxes. In that manner, we can create an animated menu.

Step 1. Open a text editor or write the following code and by run it to see the output and whatever image name we will use in the code. All these images should be present at the same location as our code file.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .flipBox {
            width: 240px;
            height: 200px;
            margin: 10px;
            float: left;
        }
        .flipBox > .front {
            position: absolute;
            -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
            background: #F00;
            width: 240px;
            height: 200px;
            border-radius: 7px;
            color: #FFF;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: -webkit-transform .5s linear 0s;
            transition: transform .5s linear 0s;
        }
        .flipBox > .back {
            position: absolute;
            -webkit-transform: perspective(600px) rotateY(180deg);
            transform: perspective(600px) rotateY(180deg);
            background: #00F;
            width: 240px;
            height: 200px;
            border-radius: 7px;
            color: #FF0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: -webkit-transform .5s linear 0s;
            transition: transform .5s linear 0s;
        }
        .flipBox:hover > .front {
            -webkit-transform: perspective(600px) rotateY(-180deg);
            transform: perspective(600px) rotateY(-180deg);
        }
        .flipBox:hover > .back {
            -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="flipBox">
        <div class="back"></br>Price1<img src="bag.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box1</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price2<img src="tshirt.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box2</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price3<img src="wrist_watch.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box3</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price4<img src="flash.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box4</div>
    </div>
</body>
</html>

Step 2. I will save this file named "filpcss.html" and run it in the Chrome browser to see output like this.

  1. Click on the front side of the box.
    Font side
  2. Click on box 2, flip the box 2.
    Flip the box
  3. Backside of box 2.
    Backside
  4. The backside of box1.
    Site
  5. The backside of box 3.
    Box image
  6. The backside of box 4.
    Box pic

It is a simple example of the CSS3 Filp3D Effect. Happy coding. Thank you.


Similar Articles