How to create 3d flip box with css?

How to create a 3D rotate box in CSS?

It needs to perspective: property in the parent container and inner container need to use transform-style: preserve-3d; and inner container also use transition: transform 0.8s; because if you don’t use transition then it will be not changed as smoothly and it shows as jerking. When we use the hover effect then we need to use transform property as 180 deg in 3d (transform: rotateY(180deg);).

Flip box example code below:

<style>

        .flipBox {

            background: transparent;

            width: 300px;

            height: 100px;

            border: 1px solid #ccc;

            perspective: 300px;

            font-family: Arial, Helvetica, sans-serif;

        }

        .flipInner {

            position: relative;

            width: 100%;

            height: 100%;

            text-align: center;

            transition: transform 0.8s;

            transform-style: preserve-3d;

        }

        .flipBox:hover .flipInner {

            transform: rotateY(180deg);

        }

        .flipFront,

        .flipBack {

            position: absolute;

            width: 100%;

            height: 100%;

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

        }

        .flipFront {

            background: #eee;

            color: #333;

        }

        .flipBack {

            background: #0bf;

            color: #fff;

            transform: rotateY(180deg);

        }

    </style>

<div class="flipBox">

        <div class="flipInner">

            <div class="flipFront">

                <h2>Front Side</h2>

            </div>

            <div class="flipBack">

                <h2>Back Side</h2>

            </div>

        </div>

    </div>

When you will use the above code then you will find visual as below screenshot:

 

If you want create automatic rotate flip box then need to add some css properties and add css animation as below code:

.flipInner {

            position: relative;

            width: 100%;

            height: 100%;

            text-align: center;

            transition: transform 0.8s;

            transform-style: preserve-3d;

            -webkit-animation: animationFlipbox 5s infinite;

            animation: animationFlipbox 5s infinite

        }

        @-webkit-keyframes animationFlipbox {

        40%{transform:rotateY(0deg)}

        50%{transform:rotateY(180deg)}

        90%{transform:rotateY(180deg)}

        100%{transform:rotateY(0deg)}

        }

        @keyframes animationFlipbox {

        40%{transform:rotateY(0deg)}

        50%{transform:rotateY(180deg)}

        90%{transform:rotateY(180deg)}

        100%{transform:rotateY(0deg)}

        }

Then you will found result as below screenshot: