{"id":27065,"date":"2016-07-20T21:01:41","date_gmt":"2016-07-20T13:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27065"},"modified":"2025-04-24T17:19:35","modified_gmt":"2025-04-24T09:19:35","slug":"css-3d-button-flip-animation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/","title":{"rendered":"How to Create 3D Button Flip Animations With CSS"},"content":{"rendered":"<p><strong>Flip animations<\/strong> are popular CSS effects that show <strong>both the front and the back<\/strong> of an HTML element by turning them from the top to the bottom, or from left to the right (and vice versa). They are neat in 2 dimensions, but they are even cooler when performed in 3D.<\/p>\n<p>In this post, I\u2019ll show you how to <strong>create simple 3D buttons<\/strong> and <strong>add flip animations<\/strong> to them.<\/p>\n<p>You can see the result in the demo below. If you click on the buttons, they\u2019ll perform the labeled flip animation.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/\">15 Beautiful Text Effects Created with CSS<\/a>\n\t\t\t\t<\/p>\n<p><iframe loading=\"lazy\" frameborder=\"0\" height=\"650\" scrolling=\"no\" src=\"https:\/\/rpsthecoder.github.io\/3d-button-flip\/\" width=\"100%\"><\/iframe><\/p>\n<h3>1. Creating the HTML for the 3D button<\/h3>\n<p>To create a 3D button (with a Top \u2192 Bottom flip), first, we stack three <code>&lt;div&gt;<\/code>s on each other: two for the front and back faces of the button, and a third one for filling the depth in the middle. We put the three button faces into the <code>.flipBtn<\/code> container, which will function as the 3D button, and place the 3D button into the <code>.flipBtnWrapper<\/code> wrapper.<\/p>\n<pre>\n&lt;div class=\"flipBtnWrapper\"&gt;\n  &lt;div class=\"flipBtn\"&gt;\n    &lt;div class=\"flipBtn_face flipBtn_back\"&gt;&lt;\/div&gt;\n    &lt;div class=\"flipBtn_face flipBtn_mid\"&gt;&lt;\/div&gt;\n    &lt;div class=\"flipBtn_face flipBtn_front\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<h3>2. Adding basic styles with CSS<\/h3>\n<p>We set the <code>width<\/code> and <code>height<\/code> properties for the wrapper, the button, and the button faces, and position them using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_position_absolute\">relative\/absolute positioning<\/a> technique.<\/p>\n<pre>\n.flipBtnWrapper {\n  width: 200px;\n  height: 200px;\n  position: relative;\n}\n\n.flipBtn,\n.flipBtn_face {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n<\/pre>\n<h3>3. Style the 3 button faces<\/h3>\n<p>We add background images to the front and back button faces and set a linear gradient behind the images for both. The trick here is that in CSS, you can set <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss3_background_multiple\">multiple images as the background image<\/a> for the same element, and you can also declare gradients as background images.<\/p>\n<p>The middle face, <code>.flipBtn_mid<\/code>, is given a <code>height<\/code> of 20px, and the same space (20px) is created between the front and back faces. We achieve the latter by using the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-function\/translateZ\">translateZ()<\/a><\/code> CSS function, which <strong>moves an element along the z-axis<\/strong>. We push the back face back by 10px and bring the front face forward by 10px.<\/p>\n<pre>\n.flipBtn_front {\n  background-image: url(\"image\/css-3d-flip-button-animation-play.png\"),\n    linear-gradient(#FF6366 50%, #FEA56E);\n  backface-visibility: hidden;\n  transform:  translateZ( 10px );\n}\n\n.flipBtn_back {\n  background-image: url(\"image\/css-3d-flip-button-animation-pause.png\"),\n    linear-gradient(#FF6366 50%, #FEA56E);\n  background-color: blue;\n  transform:  translateZ( -10px );\n}\n\n.flipBtn_mid {\n  height: 20px;\n  background-color: #d5485a;\n  transform: rotateX(90deg);\n  top: -10px;\n}\n<\/pre>\n<p>To cover the space between the front and back faces with the middle one, we lay the middle face flat across the x-plane of the 3D space using the <code>transform: rotateX(90deg);<\/code> rule, which makes it perpendicular to both the front and back button faces on the y-plane.<\/p>\n<p>Since the middle face was laid flat across the x-plane, its top point on the y-axis moves 10px (half of its height) down from its original position. So, to pull it back up and align its top with the other two button faces, we added the <code>top: -10px<\/code> rule.<\/p>\n<p>We used the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_backface-visibility.asp\">backface-visibility<\/a><\/code> CSS property for the front face so that when we flip the button, the back of the front face will not be visible.<\/p>\n<p>So far, you will only see the front face on the screen, as the x-plane is hidden from view, and on the y-plane (the screen), the last face rendered was the front. By rotating the button, you will be able to see the other faces.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS 3D button unrotated\" height=\"220\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg\" width=\"660\"><figcaption>The button<\/figcaption><\/figure>\n<h3>4. Rotating the button<\/h3>\n<p>The <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform-style\">transform-style<\/a><\/code> CSS property determines whether the child elements of an HTML element are displayed flat or positioned in 3D space. In the code snippet below, the <code>transform-style: preserve-3d;<\/code> rule gives 3D volume to our button, while the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp\">transform: rotateX()<\/a><\/code> property rotates it around the x-axis.<\/p>\n<pre>\n.flipBtn {\n  transform-style: preserve-3d;\n  transform: rotateX( -120deg);\n}\n<\/pre>\n<p>Note that we used <code>-120deg<\/code> solely for demonstration purposes, as this makes it easier to illustrate how the button rotation works.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS 3D button rotated\" height=\"220\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-rotated-screenshot.jpg\" width=\"660\"><figcaption>Button rotated by -120\u00b0<\/figcaption><\/figure>\n<p>However, in the next step, we will change it to <code>-180deg<\/code> to make the button flip completely around.<\/p>\n<h3>5. Animating the button<\/h3>\n<p>At this point, our 3D button is still not animated. We can achieve this using the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css3_transitions.asp\">transition<\/a><\/code> property. We use <code>transform<\/code> as the first value, as this is the property we want to apply the transition effect to. The second value is the duration: <code>2s<\/code>.<\/p>\n<p>Let\u2019s make the button rotate only on hover. Instead of the <code>.flipBtn<\/code> selector, let\u2019s use <code>.flipBtnWrapper:hover .flipBtn<\/code>. As mentioned earlier, we also change the value of <code>rotateX()<\/code> to <code>-180deg<\/code> to make the button flip completely around.<\/p>\n<pre>\n.flipBtn {\n  transition: transform 2s;\n  transform-style: preserve-3d;\n}\n\n.flipBtnWrapper:hover .flipBtn {\n  transform: rotateX( -180deg);\n}\n<\/pre>\n<p>Note that in the GitHub repo, we added a checkbox to each button to trigger the animation on <code>:checked<\/code> rather than <code>:hover<\/code>, making it behave more like a real button. We also included four different buttons with four flip directions (Top \u2192 Bottom, Bottom \u2192 Top, Right \u2192 Left, and Left \u2192 Right), so you can easily use whichever you want.<\/p>\n<div class=\"button\">\n    <a href=\"https:\/\/hongkiat.github.io\/3d-button-flip\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n    <a href=\"https:\/\/github.com\/hongkiat\/3d-button-flip\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left to the right (and vice versa). They are neat in 2 dimensions, but they are even cooler when performed in 3D. In this post, I\u2019ll&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,3498,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create 3D Button Flip Animations With CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left\" \/>\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.hongkiat.com\/blog\/css-3d-button-flip-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create 3D Button Flip Animations With CSS\" \/>\n<meta property=\"og:description\" content=\"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-20T13:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:19:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Create 3D Button Flip Animations With CSS\",\"datePublished\":\"2016-07-20T13:01:41+00:00\",\"dateModified\":\"2025-04-24T09:19:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/\"},\"wordCount\":700,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-button-flip-animation\\\/css-3d-flip-button-animation-screenshot.jpg\",\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/\",\"name\":\"How to Create 3D Button Flip Animations With CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-button-flip-animation\\\/css-3d-flip-button-animation-screenshot.jpg\",\"datePublished\":\"2016-07-20T13:01:41+00:00\",\"dateModified\":\"2025-04-24T09:19:35+00:00\",\"description\":\"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-button-flip-animation\\\/css-3d-flip-button-animation-screenshot.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-button-flip-animation\\\/css-3d-flip-button-animation-screenshot.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-button-flip-animation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create 3D Button Flip Animations With CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create 3D Button Flip Animations With CSS - Hongkiat","description":"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left","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.hongkiat.com\/blog\/css-3d-button-flip-animation\/","og_locale":"en_US","og_type":"article","og_title":"How to Create 3D Button Flip Animations With CSS","og_description":"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left","og_url":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-07-20T13:01:41+00:00","article_modified_time":"2025-04-24T09:19:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Create 3D Button Flip Animations With CSS","datePublished":"2016-07-20T13:01:41+00:00","dateModified":"2025-04-24T09:19:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/"},"wordCount":700,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg","keywords":["CSS","CSS Animation","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/","url":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/","name":"How to Create 3D Button Flip Animations With CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg","datePublished":"2016-07-20T13:01:41+00:00","dateModified":"2025-04-24T09:19:35+00:00","description":"Flip animations are popular CSS effects that show both the front and the back of an HTML element by turning them from the top to the bottom, or from left","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-button-flip-animation\/css-3d-flip-button-animation-screenshot.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-button-flip-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create 3D Button Flip Animations With CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-72x","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27065"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27065\/revisions"}],"predecessor-version":[{"id":74125,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27065\/revisions\/74125"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27065"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}