{"id":2091,"date":"2014-12-29T07:04:52","date_gmt":"2014-12-29T07:04:52","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2091"},"modified":"2015-05-10T07:45:28","modified_gmt":"2015-05-10T07:45:28","slug":"css-horizontal-flip-animation-code-with-demo","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/","title":{"rendered":"CSS Horizontal Flip Animation Code with Demo"},"content":{"rendered":"<p>Today CSS plays an important role in web development, and latest version of Cascading Style Sheets (CSS) is powerful to make animations too. Adobe flash animation is old method and trending is making animations without flash. Flash has many drawbacks comparing to jQuery and CSS, so minimize the usage of flash is a good idea.<br \/>\nHere is an example of Flip animation which is build on CSS only, it uses the feature 3D Transforms and hence its only worked in modern browsers which supports 3D Transforms.<\/p>\n<p>Here is the code used for building CSS Horizontal Flip Animation, and you can view the a working demo at bottom of this post.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\t.outer { \r\n\t\twidth:275px; \r\n\t\theight:475px; \r\n\t\t-webkit-perspective:900px; \r\n\t\tmargin-left:40%; \r\n\t}\r\n\t.outer div { \r\n\t\twidth:275px; \r\n\t\theight:475px; \r\n\t\ttransition:all .6s; \r\n\t\tposition:absolute; \r\n\t}\r\n\t.front { \r\n\t\tz-index:999; \r\n\t}\r\n\t.back { \r\n\t\tz-index:-999; \r\n\t\t-webkit-transform:rotateY(180deg); \r\n\t\t-moz-transform: rotateY(180deg); \r\n\t\t-o-transform: rotateY(180deg); \r\n\t\t-ms-transform: rotateY(180deg); \r\n\t\ttransform: rotateY(180deg); \r\n\t}\r\n\t.outer:hover .front { \r\n\t\t-webkit-transform:rotateY(-180deg);\r\n\t\t-moz-transform: rotateY(-180deg);\r\n\t\t-o-transform: rotateY(-180deg);\r\n\t\t-ms-transform: rotateY(-180deg);\r\n\t\ttransform: rotateY(-180deg);\r\n\t\tz-index:-999; \r\n\t\tcursor:pointer; \r\n\t}\r\n\t.outer:hover .back { \r\n\t\t-webkit-transform:rotateY(0deg);\r\n\t\t-moz-transform: rotateY(0deg);\r\n\t\t-o-transform: rotateY(0deg);\r\n\t\t-ms-transform: rotateY(0deg);\r\n\t\ttransform: rotateY(0deg);\r\n\t\tz-index:999;\r\n\t\tcursor:pointer; \r\n\t}\r\n\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t\t\t<!-- Flip -->\r\n\t\t\t\t\r\n\t\t\t\t\t<div class=\"outer\">\r\n\t\t\t\t\t\t<div class=\"front\"><img decoding=\"async\" src=\"images\/front.png\"\/><\/div>\r\n\t\t\t\t\t\t<div class=\"back\"><img decoding=\"async\" src=\"images\/back.png\"\/><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\r\n\t\t\t\t<!-- End of Flip -->\r\n\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/horizontal-flip.html\" target=\"_blank\">Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today CSS plays an important role in web development, and latest version of Cascading Style Sheets (CSS) is powerful to make animations too. Adobe flash animation is old method and trending is making animations without flash. Flash has many drawbacks comparing to jQuery and CSS, so minimize the usage of flash is a good idea. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[72,67,101,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Horizontal Flip Animation Code with Demo - Vishmax.com<\/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.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Horizontal Flip Animation Code with Demo - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Today CSS plays an important role in web development, and latest version of Cascading Style Sheets (CSS) is powerful to make animations too. Adobe flash animation is old method and trending is making animations without flash. Flash has many drawbacks comparing to jQuery and CSS, so minimize the usage of flash is a good idea. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-29T07:04:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-10T07:45:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/horizontal-flip-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"CSS Horizontal Flip Animation Code with Demo\",\"datePublished\":\"2014-12-29T07:04:52+00:00\",\"dateModified\":\"2015-05-10T07:45:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\"},\"wordCount\":121,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"Code Library\",\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\",\"name\":\"CSS Horizontal Flip Animation Code with Demo - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-29T07:04:52+00:00\",\"dateModified\":\"2015-05-10T07:45:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Horizontal Flip Animation Code with Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Horizontal Flip Animation Code with Demo - Vishmax.com","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.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/","og_locale":"en_US","og_type":"article","og_title":"CSS Horizontal Flip Animation Code with Demo - Vishmax.com","og_description":"Today CSS plays an important role in web development, and latest version of Cascading Style Sheets (CSS) is powerful to make animations too. Adobe flash animation is old method and trending is making animations without flash. Flash has many drawbacks comparing to jQuery and CSS, so minimize the usage of flash is a good idea. [&hellip;]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-29T07:04:52+00:00","article_modified_time":"2015-05-10T07:45:28+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/horizontal-flip-400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"CSS Horizontal Flip Animation Code with Demo","datePublished":"2014-12-29T07:04:52+00:00","dateModified":"2015-05-10T07:45:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/"},"wordCount":121,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["Code Library","CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/","url":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/","name":"CSS Horizontal Flip Animation Code with Demo - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-29T07:04:52+00:00","dateModified":"2015-05-10T07:45:28+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-horizontal-flip-animation-code-with-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS Horizontal Flip Animation Code with Demo"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2091"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2091"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2091\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2600"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2091"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}