{"id":16927,"date":"2013-04-15T21:01:24","date_gmt":"2013-04-15T13:01:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16927"},"modified":"2025-04-24T17:19:04","modified_gmt":"2025-04-24T09:19:04","slug":"css3-3d-transforms","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/","title":{"rendered":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design"},"content":{"rendered":"<p>The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/\">CSS3 2D Transforms<\/a>. This time, we will look into transforming elements in 3D space and specifically demonstrate how to create the OSX Flip Effect.<\/p>\n<p>Click \u2018View demo\u2019 below to see the final result.<\/p>\n<div class=\"button\">\n    <a href=\"https:\/\/hongkiat.github.io\/css3-3d-transforms\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n<\/div>\n<h2>3D Rotation Syntax<\/h2>\n<p>Rotation in 3D space is fundamentally similar to 2D rotation, which we discussed previously. To rotate an element vertically, use the following syntax:<\/p>\n<pre>\n    -webkit-transform: rotateX(Ndeg);\n    -moz-transform: rotateX(Ndeg);\n    transform: rotateX(Ndeg);\n<\/pre>\n<p>Similarly, you can flip horizontally using this syntax:<\/p>\n<pre>\n    -webkit-transform: rotateY(Ndeg);\n    -moz-transform: rotateY(Ndeg);\n    transform: rotateY(Ndeg);\n<\/pre>\n<p>Many great resources delve deeper into CSS3 3D Transforms. Here are our recommendations:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/24ways.org\/2010\/intro-to-css-3d-transforms\/\">An Introduction to CSS 3-D Transforms<\/a> \u2013 24 Ways<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/transforms2d\">CSS3 Transform Browser Support<\/a> \u2013 CanIUse.com<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2012\/01\/adventures-in-the-third-dimension-css-3-d-transforms\/\">Adventures In The Third Dimension: CSS 3D Transforms<\/a> \u2013 SmashingMagazine<\/li>\n<\/ul>\n<h2>OSX Flip Effect<\/h2>\n<p>As mentioned, we will apply CSS3 Transforms to create the OSX\/iOS flip effect. If you use these operating systems, you are likely familiar with this effect. In macOS, you can often find it in Dashboard Widgets.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg\" width=\"500\" alt=\"OSX Dashboard Flip Effect\"><\/figure>\n<p>Previously, creating such an effect required JavaScript libraries. Today, however, we can achieve it more simply by combining JavaScript with CSS3 Transforms.<\/p>\n<h3>Assets<\/h3>\n<p>For this demonstration, we only need jQuery and this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/677761-Passbook-GUI-PSD\">PSD of iOS Passbook from Dribbble<\/a> for our graphical UI. We can make adjustments using Photoshop.<\/p>\n<p>Next, pick one of the passbook graphics and save it as two separate files: one for the front face and one for the back. In this example, we picked the Starbucks <a href=\"https:\/\/www.hongkiat.com\/blog\/ios-passbook-apps\/\">Passbook<\/a>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/face.jpg\" width=\"500\" alt=\"Passbook Front Back Faces\"><\/figure>\n<h3>HTML<\/h3>\n<p>Now, create a basic HTML document and place the following markup inside the <code>&lt;body&gt;<\/code>:<\/p>\n<pre>\n&lt;section class=\"passbook\"&gt;\n    &lt;div class=\"card front\"&gt;\n        &lt;img src=\"img\/starbuck-front.png\" alt=\"Starbucks Passbook Front\"&gt;\n        &lt;a href=\"#\" class=\"info flip\"&gt;i&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"card back\"&gt;\n        &lt;ul class=\"nav\"&gt;\n            &lt;li class=\"title\"&gt;Starbuck Coffee&lt;\/li&gt;\n            &lt;li class=\"button done\"&gt;\n                &lt;a class=\"flip\" href=\"#\"&gt;Done&lt;\/a&gt;\n            &lt;\/li&gt;\n        &lt;\/ul&gt;\n        &lt;img src=\"img\/starbuck-back.png\" alt=\"Starbucks Passbook Back\"&gt;\n    &lt;\/div&gt;\n&lt;\/section&gt;\n<\/pre>\n<p>As shown above, we contain the front and back faces in two separate <code>&lt;div&gt;<\/code> elements. The front face has a link that flips the Passbook when clicked. The back face also has a link to flip it back.<\/p>\n<h3>CSS<\/h3>\n<p>Assuming you have created a new CSS file: In this stylesheet, we first specify the Passbook dimensions and set the `transform-style` to `preserve-3d`. This ensures child elements are also transformed in 3D space. We also add a transition effect for a smooth flip animation.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-transforms\/#transform-style-property\">CSS3 Transform: preserve-3D Documentation<\/a><\/p>\n<pre>\n.passbook {\n    position: relative;\n    width: 300px;\n    height: 380px;\n    margin-bottom: 100px;\n    margin-left: 85px;\n\n    -webkit-transform-style: preserve-3d;\n    -moz-transform-style: preserve-3d;\n    transform-style: preserve-3d;\n\n    -webkit-transition: 0.5s;\n    -moz-transition: 0.5s;\n    transition: 0.5s;\n}\n<\/pre>\n<p>Next, we set the card `position` to `absolute`, so the cards stack on top of each other. We also need to hide the back face using the `backface-visibility` property.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-transforms\/#backface-visibility\">CSS3 Transform: backface-visibility Documentation<\/a><\/p>\n<pre>\n.card {\n    position: absolute;\n    -webkit-backface-visibility: hidden;\n    -moz-backface-visibility: hidden;\n    backface-visibility: hidden;\n}\n<\/pre>\n<h3>Front Face<\/h3>\n<p>Now, let\u2019s add decorative styles to the link on the front face:<\/p>\n<pre>\n.front .info {\n    \/* Positioning *\/\n    position: absolute;\n    right: 10px;\n    bottom: 15px;\n    display: block;\n\n    \/* Box Model *\/\n    width: 18px;\n    height: 18px;\n    border-radius: 21px;\n\n    \/* Typography *\/\n    font-family: \"Georgia\", serif;\n    font-style: italic;\n    font-size: 11px;\n    line-height: 18px;\n    text-align: center;\n    text-decoration: none;\n    color: #fff;\n\n    \/* Background *\/\n    background-color: #075621;\n}\n<\/pre>\n<p>We also need to position the front face above the back face by specifying a higher `z-index`.<\/p>\n<pre>\n.front {\n    z-index: 1;\n}\n<\/pre>\n<h3>Back Face<\/h3>\n<p>For the back face, we need to flip it initially:<\/p>\n<pre>\n.back {\n    -webkit-transform: rotateY(180deg);\n    -moz-transform: rotateY(180deg);\n    transform: rotateY(180deg);\n}\n<\/pre>\n<p>Then, we add decorative styles to the navigation. This includes changing the text color, adding a gradient to the link button, and positioning it correctly.<\/p>\n<pre>\n.back .nav {\n    padding: 0;\n    margin: 0;\n    color: #fff;\n    font-size: 12px;\n    width: 100%;\n    font-weight: bold;\n}\n\n.back .nav li {\n    display: inline;\n    position: absolute;\n    top: 18px;\n}\n\n.back .nav a {\n    font-weight: bold;\n    text-decoration: none;\n    padding: 7px 10px;\n    border: 1px solid #095d25;\n    border-radius: 5px;\n    color: #fff;\n    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.5) 100%);\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(0,0,0,0.5)));\n    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);\n    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);\n    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);\n    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);\n}\n\n.back .nav a:hover {\n    background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.55) 100%);\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.55)));\n    background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);\n    background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);\n    background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);\n    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);\n}\n\n.back .nav .title {\n    left: 105px;\n}\n\n.button.done {\n    right: 10px;\n}\n<\/pre>\n<p>Finally, we add a class to flip the <a href=\"https:\/\/www.hongkiat.com\/blog\/ios-passbook-apps\/\">Passbook<\/a> horizontally:<\/p>\n<pre>\n.rotate-3d {\n  -webkit-transform: rotateY(180deg);\n  -moz-transform: rotateY(180deg);\n  transform: rotateY(180deg);\n}\n<\/pre>\n<h3>jQuery<\/h3>\n<p>The jQuery part is relatively simple. First, remember to link the jQuery library in the `&lt;head&gt;`:<\/p>\n<pre>\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>Then, we use the `toggleClass` function from jQuery to apply the `.rotate-3d` class defined in our stylesheet:<\/p>\n<pre>\n&lt;script type=\"text\/javascript\"&gt;\n    $(document).ready(function() {\n        $('a.flip').click(function(event) {\n            $('.passbook').toggleClass('rotate-3d');\n            event.preventDefault();\n        });\n    });\n&lt;\/script&gt;<\/pre>\n<p>That\u2019s all the code required. It\u2019s significantly simpler than using only JavaScript to achieve a similar effect. As usual, you can view the demo and download the source code using the links below.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-3d-transforms\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-3d-transforms\/\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into transforming elements in 3D space and specifically demonstrate how to create the OSX Flip Effect. Click \u2018View demo\u2019 below to see the final result. View Demo 3D Rotation Syntax&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1096,507,506,2016,3416],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Cool Flip Effect With CSS3 3D Rotation For UI Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into\" \/>\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\/css3-3d-transforms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Cool Flip Effect With CSS3 3D Rotation For UI Design\" \/>\n<meta property=\"og:description\" content=\"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/\" \/>\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=\"2013-04-15T13:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:19:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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\\\/css3-3d-transforms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Create Cool Flip Effect With CSS3 3D Rotation For UI Design\",\"datePublished\":\"2013-04-15T13:01:24+00:00\",\"dateModified\":\"2025-04-24T09:19:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/\"},\"wordCount\":546,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-3d-transforms\\\/osx-dashboard.jpg\",\"keywords\":[\"Animation UI\",\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"ui\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/\",\"name\":\"Create Cool Flip Effect With CSS3 3D Rotation For UI Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-3d-transforms\\\/osx-dashboard.jpg\",\"datePublished\":\"2013-04-15T13:01:24+00:00\",\"dateModified\":\"2025-04-24T09:19:04+00:00\",\"description\":\"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-3d-transforms\\\/osx-dashboard.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-3d-transforms\\\/osx-dashboard.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-3d-transforms\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Cool Flip Effect With CSS3 3D Rotation For UI Design\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design - Hongkiat","description":"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into","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\/css3-3d-transforms\/","og_locale":"en_US","og_type":"article","og_title":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design","og_description":"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-04-15T13:01:24+00:00","article_modified_time":"2025-04-24T09:19:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design","datePublished":"2013-04-15T13:01:24+00:00","dateModified":"2025-04-24T09:19:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/"},"wordCount":546,"commentCount":12,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg","keywords":["Animation UI","CSS","HTML","HTML5 \/ CSS3 Tutorials","ui"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/","name":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg","datePublished":"2013-04-15T13:01:24+00:00","dateModified":"2025-04-24T09:19:04+00:00","description":"The CSS3 specification includes two types of transforms: 2D and 3D. In a previous post, we discussed CSS3 2D Transforms. This time, we will look into","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-3d-transforms\/osx-dashboard.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Cool Flip Effect With CSS3 3D Rotation For UI Design"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4p1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16927","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16927"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16927\/revisions"}],"predecessor-version":[{"id":74123,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16927\/revisions\/74123"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16927"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}