{"id":13980,"date":"2011-08-31T20:06:32","date_gmt":"2011-09-01T03:06:32","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13980"},"modified":"2023-02-01T07:27:24","modified_gmt":"2023-02-01T15:27:24","slug":"backface-visibility","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/","title":{"rendered":"backface-visibility"},"content":{"rendered":"\n<p>The <code>backface-visibility<\/code> property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the &#8220;front&#8221; of an element no longer faces the screen. For instance, this would flip an element away from the screen:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.flip {\n  transform: rotateY(180deg);\n}<\/code><\/pre>\n\n\n\n<p>It will look as if you picked it up with a spatula and flipped it over like a pancake. That&#8217;s because the default for <code>backface-visibility<\/code> is <code>visible<\/code>. Instead of it being visible, you could hide it.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.flip {\n  transform: rotateY(180deg);\n  backface-visibility: hidden;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">backface-visibility: visible | hidden;<\/code><\/pre>\n\n\n\n<ul>\n<li><strong>Initial value:<\/strong> <code>visible<\/code><\/li>\n\n\n\n<li><strong>Applies to:<\/strong> transformable elements<\/li>\n\n\n\n<li><strong>Inherited:<\/strong> no<\/li>\n\n\n\n<li><strong>Percentages:<\/strong> n\/a<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> specific keyword<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> discrete<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul>\n<li><strong><code>visible<\/code><\/strong> (default) &#8211; The element will always be visible even when not facing the screen.<\/li>\n\n\n\n<li><strong><code>hidden<\/code><\/strong> &#8211; The element is <em>not<\/em> visible when not facing the screen.<\/li>\n\n\n\n<li><strong><code>inherit<\/code><\/strong> &#8211; The property gets its value from the its parent element.<\/li>\n\n\n\n<li><strong><code>initial<\/code><\/strong> &#8211; Sets the property to its default, which is <code>visible<\/code>.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_FjwGA\" src=\"\/\/codepen.io\/anon\/embed\/FjwGA?height=450&amp;theme-id=1&amp;slug-hash=FjwGA&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed FjwGA\" title=\"CodePen Embed FjwGA\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is useful when doing 3D effects. For instance&#8230;<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"works-properly\">Works properly<\/h4>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container\">\n&lt;div class=\"card\">\n&lt;div class=\"face front\">Front&lt;\/div>\n&lt;div class=\"face back\">Back&lt;\/div>\n&lt;p>&nbsp;&lt;\/p>\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"problematic-in-webkit-because-backfacevisibility-not-hidden\">Problematic in WebKit because backface-visibility not hidden<\/h4>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"container no-hide\">\n&lt;div class=\"card\">\n&lt;div class=\"face front\">Front&lt;\/div>\n&lt;div class=\"face back\">Back&lt;\/div>\n&lt;p>&nbsp;&lt;\/p>\n&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>This isn&#8217;t problematic in Firefox for whatever reason, although the property works the same way.<\/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\">10<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">10 <sup>1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">12 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">5.1 <sup>2<\/sup><\/abbr><\/td><td class=\"has-text-align-center\" data-align=\"center\">15 <sup>2<\/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>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">5 <sup>2<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">62<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_backface-visibility\" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Supported in Firefox 10-15 with prefix <code>-moz-<\/code><br><sup>2<\/sup> Supported in Chrome 12-35, Safari, Safari iOS, and Opera 15-22 with prefix <code>-webkit-<\/code><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-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-13980\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Aug 31, 2011\">\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      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/3d\/\" rel=\"tag\">3d<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/backface-visibility\/\" rel=\"tag\">backface-visibility<\/a>    <\/div>\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    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;front&#8221; of an element no longer faces the screen. For instance, this would flip an element away from the screen: It will look as if you picked it up with a [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13913,"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":[833,1554],"acf":[],"jetpack-related-posts":[{"id":206892,"url":"https:\/\/css-tricks.com\/snippets\/css\/shake-css-keyframe-animation\/","url_meta":{"origin":13980,"position":0},"title":"&#8220;Shake&#8221; CSS Keyframe Animation","date":"August 22, 2015","format":false,"excerpt":"This assumes the use of an autoprefixer. .face:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0);\u2026","rel":"","context":"With 42 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342681,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","url_meta":{"origin":13980,"position":1},"title":"content-visibility","date":"June 21, 2021","format":false,"excerpt":"The content-visibility property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load\u2026","rel":"","context":"In \"content-visibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/visibility-nope.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14123,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","url_meta":{"origin":13980,"position":2},"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":208296,"url":"https:\/\/css-tricks.com\/snippets\/css\/toggle-visibility-when-hiding-elements\/","url_meta":{"origin":13980,"position":3},"title":"Toggle Visibility When Hiding Elements","date":"September 17, 2015","format":false,"excerpt":"The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too: .m-fadeOut {\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14130,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/","url_meta":{"origin":13980,"position":4},"title":"visibility","date":"September 6, 2011","format":false,"excerpt":"The\u00a0visibility\u00a0property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element\u00a0without changing the layout. p { visibility: hidden; } tr { visibility: collapse; } visibility\u00a0has four valid values:\u00a0visible,\u00a0hidden,\u00a0collapse, and\u00a0inherit. We\u2019ll go through each of them to learn more. visible Just\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17442,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/","url_meta":{"origin":13980,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13980"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13980"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13980\/revisions"}],"predecessor-version":[{"id":376976,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13980\/revisions\/376976"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13980"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}