{"id":31394,"date":"2016-01-14T10:36:38","date_gmt":"2016-01-14T05:06:38","guid":{"rendered":"https:\/\/tothenewco.pro\/blog\/?p=31394"},"modified":"2017-09-12T12:45:08","modified_gmt":"2017-09-12T07:15:08","slug":"creating-3d-flip-animation-with-css3-and-html","status":"publish","type":"post","link":"https:\/\/tothenewco.pro\/blog\/creating-3d-flip-animation-with-css3-and-html\/","title":{"rendered":"Creating 3D Flip Animation with CSS3 and HTML"},"content":{"rendered":"

There are many ways to create the flip effect with jQuery however here is an example of creating a 3D flip animation with CSS3 and HTML.<\/p>\n

How will it look like?<\/h3>\n

The effect below shows the type of 3D flip animation we are going to create.<\/p>\n

Just hover the mouse over the box below to see the effect<\/em><\/p>\n

\n
\n

Front Box<\/h1>\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec lorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue, tempor vel nunc in, aliquam pellentesque quam. Nulla viverra vehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<\/div>\n

\n

Back Box<\/h1>\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec lorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue, tempor vel nunc in, aliquam pellentesque quam. Nulla viverra vehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<\/div>\n<\/div>\n

The HTML code<\/h3>\n

Here goes the HTML structure to accomplish the two-sided effect<\/p>\n

[java]<div id="flip">
\n\t<div class="flip-content one">
\n\t\t<h1>Front Box<\/h1>
\n\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\n\t\tVestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec
\n\t\tlorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue,
\n\t\ttempor vel nunc in, aliquam pellentesque quam. Nulla viverra
\n\t\tvehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <\/p>
\n\t<\/div><\/p>\n

\t<div class="flip-content two">
\n\t\t<h1>Back Box<\/h1>
\n\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\n\t\tVestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec
\n\t\tlorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue,
\n\t\ttempor vel nunc in, aliquam pellentesque quam. Nulla viverra
\n\t\tvehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <\/p>
\n\t<\/div>
\n<\/div>[\/java]<\/p>\n

CSS3 Code:<\/h3>\n

Styling of first and second box:<\/p>\n

[java].flip-content {
\n position: absolute;
\n height: 360px;
\n width: 360px;
\n padding: 20px;
\n background-color: white;
\n border: solid 1px #ccc;
\n}
\n#flip .one {
\n -webkit-transform: translateZ(200px);
\n transform: translateZ(200px);
\n}<\/p>\n

#flip .two {
\n -webkit-transform: rotateY(90deg) translateZ(200px);
\n transform: rotateY(90deg) translateZ(200px);
\n}[\/java]<\/p>\n

But does this makes a 3D effect?<\/h3>\n

No!<\/h1>\n

Here goes the code to give styling for 3D flip animation on mouse hover of box1 and box2:<\/p>\n

[java]#flip {
\n\tposition: relative;
\n\tmargin: 0px;
\n\theight: 400px;
\n\twidth: 400px;
\n\t-webkit-transform-style: preserve-3d;
\n\t-webkit-transition: all 2s ease;
\n\ttransform-style: preserve-3d;
\n\ttransition: all 2s ease;
\n}
\n#flip:hover{
\n\ttransform: rotateY(-90deg);
\n}[\/java]<\/p>\n","protected":false},"excerpt":{"rendered":"

There are many ways to create the flip effect with jQuery however here is an example of creating a 3D flip animation with CSS3 and HTML. How will it look like? The effect below shows the type of 3D flip animation we are going to create. Just hover the mouse over the box below to […]<\/p>\n","protected":false},"author":206,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":21,"footnotes":""},"categories":[3429,1],"tags":[2963,2961,2962,2964,355,4842],"class_list":["post-31394","post","type-post","status-publish","format-standard","hentry","category-front-end-development","category-technology","tag-3d-animation-in-html","tag-3d-flip-animation","tag-animation-with-css3","tag-animation-with-html","tag-css3","tag-html"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t