{"id":17448,"date":"2012-07-09T12:17:51","date_gmt":"2012-07-09T19:17:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17448"},"modified":"2021-07-14T11:49:34","modified_gmt":"2021-07-14T18:49:34","slug":"transform-style","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-style\/","title":{"rendered":"transform-style"},"content":{"rendered":"\n<p>The <code>transform-style<\/code> property, when applied to an element, determines if that element&#8217;s children are positioned in 3D space, or flattened.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  transform-style: preserve-3d;\n}<\/code><\/pre>\n\n\n\n<p>It accepts one of two values: <code>flat<\/code> (the default) and <code>preserve-3d<\/code>. To demonstrate the difference between the two values, click the toggle button in the CodePen below:<script async=\"\" src=\"http:\/\/codepen.io\/assets\/embed\/ei.js\"><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pIgBf\" src=\"\/\/codepen.io\/anon\/embed\/pIgBf?height=450&amp;theme-id=1&amp;slug-hash=pIgBf&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pIgBf\" title=\"CodePen Embed pIgBf\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>When the button is clicked, the demo uses JavaScript to toggle the <code>transform-style<\/code> value between <code>preserve-3d<\/code> and <code>flat<\/code>.<\/p>\n\n\n\n<p>As you can see, when the value is changed to <code>flat<\/code>, the child elements are no longer stacked according the the <code>translateZ<\/code> values (in 3D space), but instead flatten out to appear the way elements are by default on an HTML page.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<sup> 1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">10 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">12 <sup>3<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">4 <sup>3<\/sup><\/abbr><\/td><td class=\"has-text-align-center\" data-align=\"center\">15 <sup>3<\/sup><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">3 <sup>3<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">3.2 <sup>3<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">62<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_backface-visibility\" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Internet Explorer 10 supports 3D transforms, but does not support the transform-style property.<br><sup>2<\/sup> Supported in Firefox 10-15 with prefix <code>-moz-<\/code><br><sup>3<\/sup> Supported in Chrome 12-35, Safari 4-8, Safari iOS 3.2-8.4, and Opera 15-22 with prefix <code>-webkit-<\/code><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-17448\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 27, 2023  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\">\n      transform    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform: scale(2); }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17448\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/\">\n      transform-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { transform-origin: top left; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17448\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\">\n      perspective    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective: 1000px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-17448\">\n\n  <time datetime=\"2012-07-09\" title=\"Originally published Jul 9, 2012\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 4, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\">\n      perspective-origin    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective-origin\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { perspective-origin: 25% 75%; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The transform-style property, when applied to an element, determines if that element&#8217;s children are positioned in 3D space, or flattened. It accepts one of two values: flat (the default) and preserve-3d. To demonstrate the difference between the two values, click the toggle button in the CodePen below: When the button is clicked, the demo uses [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14123,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","url_meta":{"origin":17448,"position":0},"title":"transform","date":"September 6, 2011","format":false,"excerpt":"The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size: CodePen Embed Fallback Giving this function\u2026","rel":"","context":"With 57 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17442,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/","url_meta":{"origin":17448,"position":1},"title":"transform-origin","date":"July 9, 2012","format":false,"excerpt":"The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform. .element { transform: rotate(360deg); transform-origin: top left; } As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up\u2026","rel":"","context":"In \"transform\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17444,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/","url_meta":{"origin":17448,"position":2},"title":"perspective","date":"July 9, 2012","format":false,"excerpt":"The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user. The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","url_meta":{"origin":17448,"position":3},"title":"scale","date":"November 10, 2021","format":false,"excerpt":"The scale property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356179,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/rotate\/","url_meta":{"origin":17448,"position":4},"title":"rotate","date":"November 8, 2021","format":false,"excerpt":"The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, gradian, radian, and turn values. .element { rotate: 45deg; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-favicon-rotate.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/","url_meta":{"origin":17448,"position":5},"title":"backface-visibility","date":"August 31, 2011","format":false,"excerpt":"The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the \"front\" of an element no longer faces the screen. For instance, this would flip an element away from the screen: .flip { transform: rotateY(180deg); } It\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17448"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17448"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17448\/revisions"}],"predecessor-version":[{"id":344712,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17448\/revisions\/344712"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17448"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}