How to make 3D flipping effect on an element

Screenshot2

This is the easiest way I’m showing how to make 3d flipping effect on an element by HTML and CSS3. Now follow the following instruction and enjoy it.

The HTML codes


<div class="card-container">
<div class="card">
<p>this the paragraph of 3d card</p>
</div>
</div>

Css codes


.card-container{
perspective: 700;
-webkit-perspective: 700;
-moz-perspective: 700;
-ms-perspective: 700;
-o-perspective: 700;
}
.card{
width: 200px;
height: 200px;
margin: 40px;
background: #5677fc;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}

Enjoy and Keep learning.


Leave a Reply