{"id":1961,"date":"2016-06-15T09:40:16","date_gmt":"2016-06-15T09:40:16","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1961"},"modified":"2023-10-21T09:19:42","modified_gmt":"2023-10-21T09:19:42","slug":"3d-flip-animations-by-using-jquery-3-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/","title":{"rendered":"3D Flip Animations by using jQuery: 3 Demos"},"content":{"rendered":"

3D flip animations and jQuery<\/strong><\/h3>\n

In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is \u201cflip\u201d which can be downloaded from this link<\/a>.<\/p>\n

You may specify the back and front content differently for the \u201ccard\u201d used for animation. The animation may occur as you bring the mouse over the specified element like div or at the click event as well. As the mouse is brought over or clicked in the specified element, the back content will display with the flip animation. As you take the mouse away or click again, the \u201cfront\u201d content will display again with an animation.<\/p>\n

See the live demos below for using this plug-in along with how to set up this plug-in.<\/p>\n

A demo of jQuery animation (3D flip)<\/strong><\/h3>\n

In this example, as you bring the mouse over the card area, the div will animate with a flip, and “back” content will display. You may adjust the speed of the flip animation by using the speed<\/strong> <\/em>option in the jQuery code section. Have a look at the live demo and code which is followed by how to set up this plug-in for your web pages:<\/p>\n

\"jQuery<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

For setting up this cool plug-in in your web pages, simply include the jQuery library along with the plug-in\u2019s flip.js<\/em> file in the <head> section.<\/p>\n

<script src=”http:\/\/code.jquery.com\/jquery-1.11.3.min.js”><\/script><\/p>\n

<script src=”js\/flip\/flip.js”><\/script><\/p><\/blockquote>\n

You may define the style of cards or area where the flip animation will occur in the <style> section or your external CSS file. In the demo, it is defined in the <head> section\u2019s <style> area:<\/p>\n

\u00a0\u00a0 <style type=\"text\/css\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 .card {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 500px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 200px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin: 20px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 .front, .back, .other-front, .other-back {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 border: 2px gray solid;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 padding: 10px;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 .front, .other-front {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #408080;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color: #fff;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 .back, .other-back {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-color: #C6E3E3;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 <\/style><\/pre>\n
In the markup section, use the card<\/em> class in the <div> tag and inside that <div> first use the front div content which is followed by back div. The front div\u2019s content will display as web page loads while the back div\u2019s content will display as the\u00a0mouse hovers over the card area.<\/p>\n
\u00a0 <div id=\"card-flip-animation\" class=\"card\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"other-front\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"other-back\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/google.com\">link<\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div><\/pre>\n
Finally, the jQuery code that deals with the flip animation. There, you may specify a few options of the\u00a0plug-in like axis (x or y), speed, trigger at hover or click, front and back etc.<\/p>\n
\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(function(){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"#card-flip-animation\").flip({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axis: \"y\", \/\/ y or x\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 reverse: false, \/\/ true and false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 trigger: \"hover\", \/\/ click or hover\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 speed: '1000',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 front: $('.other-front'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 back: $('.other-back'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 autoSize: false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
Get the complete code in the demo page\u2019s left panel.<\/p>\n
A demo of flip animation on click <\/strong><\/h3>\n
In this example, the animation occurs as you click the card\u2019s area rather mouse hover. \u00a0The only difference between this and above example is the trigger option where I used click<\/em><\/strong>\u00a0value in that case rather hover<\/em> value.<\/p>\n
\"jQuery<\/p>\n
The markup is the same while this script is used in the example:<\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(function(){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"#card-flip-animation\").flip({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axis: \"y\", \/\/ y or x\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 reverse: true, \/\/ true and false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 trigger: \"click\", \/\/ click or hover\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 speed: '1500',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 front: $('.other-front'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 back: $('.other-back'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 autoSize: false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo of using images as the flip animation<\/strong><\/h3>\n
In this example, rather than using the text content, I have used two images. One image, which is smaller, is for the front part and as you hover the\u00a0mouse over it, the larger image will display with flip animation. The speed of the\u00a0animation is kept 2000 i.e. 2 seconds. For demonstration, the axis value is used \u201cx\u201d unlike \u201cy\u201d used in first two examples:<\/p>\n
\"jQuery<\/p>\n
The following markup is used:<\/p>\n
\u00a0\u00a0 <div id=\"card-flip-animation\" class=\"card\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"other-front\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/banana-small.jpg\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"other-back\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <img src=\"images\/banana.jpg\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div><\/pre>\n
 <\/p>\n
The script:<\/p>\n
\u00a0\u00a0 \u00a0<script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(function(){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"#card-flip-animation\").flip({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axis: \"x\", \/\/ y or x\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 reverse: true, \/\/ true and false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 trigger: \"hover\", \/\/ click or hover\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 speed: '2000',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 front: $('.other-front'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 back: $('.other-back'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 autoSize: false\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
 <\/p>\n
 <\/p>\n
That\u2019s it!<\/p>\n","protected":false},"excerpt":{"rendered":"
3D flip animations and jQuery In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is \u201cflip\u201d which can be downloaded from this link. You may specify the back and front content differently for the \u201ccard\u201d used for animation. The animation may occur as you bring the mouse over … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1962,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[41],"yoast_head":"\n3D Flip Animations by using jQuery: 3 Demos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D Flip Animations by using jQuery: 3 Demos\" \/>\n<meta property=\"og:description\" content=\"3D flip animations and jQuery In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is \u201cflip\u201d which can be downloaded from this link. You may specify the back and front content differently for the \u201ccard\u201d used for animation. The animation may occur as you bring the mouse over ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-15T09:40:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-21T09:19:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/71.0_1-jQuery-flip-animation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"413\" \/>\n\t<meta property=\"og:image:height\" content=\"121\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/\",\"name\":\"3D Flip Animations by using jQuery: 3 Demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-06-15T09:40:16+00:00\",\"dateModified\":\"2023-10-21T09:19:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D Flip Animations by using jQuery: 3 Demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3D Flip Animations by using jQuery: 3 Demos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/","og_locale":"en_US","og_type":"article","og_title":"3D Flip Animations by using jQuery: 3 Demos","og_description":"3D flip animations and jQuery In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is \u201cflip\u201d which can be downloaded from this link. You may specify the back and front content differently for the \u201ccard\u201d used for animation. The animation may occur as you bring the mouse over ... Read more","og_url":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/","article_published_time":"2016-06-15T09:40:16+00:00","article_modified_time":"2023-10-21T09:19:42+00:00","og_image":[{"width":413,"height":121,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/71.0_1-jQuery-flip-animation.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/","url":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/","name":"3D Flip Animations by using jQuery: 3 Demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-06-15T09:40:16+00:00","dateModified":"2023-10-21T09:19:42+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/3d-flip-animations-by-using-jquery-3-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"3D Flip Animations by using jQuery: 3 Demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1961"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1961"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1961\/revisions"}],"predecessor-version":[{"id":10845,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1961\/revisions\/10845"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1962"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}