2

While studying a little bit of HTML, I came across something iI'm unable to understand.

When i'm laying 2 divs on top of each other, I noticed that if the second div is turned 180deg (i.e transform:rotateY(180deg)), the first is shown and vice versa (at least on chrome). Could someone please explain to me how it works or what are the rules? Does it have anything to do with z-indexing?

Here is a code that illustrates my question: https://jsfiddle.net/psgqktcn/3/

.card {
  height: 80px;
  width: 50px;
  line-height: 80px;
  font-size: 60px;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
}

.card .front1 {
  background: red;
}

.card .back1 {
  background: green;
}

.card .front2 {
  background: red;
  transform: rotateY(180deg);
}

.card .back2 {
  background: green;
  transform: rotateY(180deg);
}

.card figure {
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}
<div class=card class=flipped>
  <figure class="front1">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 100px">
  <figure class="front2">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 200px">
  <figure class="front1">1</figure>
  <figure class="back2">2</figure>
</div>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
Joe
  • 443
  • 1
  • 4
  • 21
  • You have errors in your code! The **semicolons** are missing in the CSS in every line with a comment, so these properties cannot be parsed. – Aloso May 07 '16 at 17:16
  • @Aloso what are you talking about? There's no missing semicolons... However that's not the problem. – Marcos Pérez Gude May 07 '16 at 17:20
  • I'm familiar with the backface-visibility attribute, I just wanted to undestand, if an element is rotated like it does in my example, it has a lower priority in the visibility hierarchy? – Joe May 07 '16 at 17:24
  • When you use `transform` or `opacity` or properties like this you are creating a new context in the Z axis, so the hierarchy is modified. Take a look: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Marcos Pérez Gude May 07 '16 at 17:31
  • @Marcos Pérez Gude The author has removed the errors, everything is fine now. – Aloso May 07 '16 at 23:19
  • Thank you @Marcos Pérez Gude, i'm looking forward to reading it. – Joe May 08 '16 at 10:45
  • Actually, after reading it, I still can't understand why in the third example the second figure element (the rotated one) is behind the first figure element. Changing its 'transform' attribute shouldn't create a new stacking context, and hence be prioritized? – Joe May 08 '16 at 16:08

2 Answers2

0

Use backface-visibility:

.card {
  height: 80px;
  width: 50px;
  line-height: 80px;
  font-size: 60px;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
}

.card .front1 {
  background: red;
}

.card .back1 {
  background: green;
}

.card .front2 {
  background: red;
  transform: rotateY(180deg);
}

.card .back2 {
  background: green;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.card figure {
  position: absolute;
  height: 100%;
  width: 100%;
  color: white;
}
<div class=card class=flipped>
  <figure class="front1">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 100px">
  <figure class="front2">1</figure>
  <figure class="back1">2</figure>
</div>

<div class=card class=flipped style="margin: 0 200px">
  <figure class="front1">1</figure>
  <figure class="back2">2</figure>
</div>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

Yes this involves z-index and stacking contexts. A transform to an element creates it's own stacking context, independent of other stacking contexts. Check out this answer for a good explanation.

MORE INFO

What No One Told You About Z-Index:

Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Or the mozilla docs:

A stacking context is formed, anywhere in the document, by any element which is either:

  • the root element (HTML),
  • positioned (absolutely or relatively) with a z-index value other than "auto",
  • a flex item with a z-index value other than "auto",that is the parent element display flex|inline-flex
  • elements with an opacity value less than 1. (See the specification for opacity),
  • elements with a transform value other than "none"
  • elements with a mix-blend-mode value other than "normal",
  • elements with a filter value other than "none", elements with a perspective value other than "none"
  • elements with isolation set to "isolate"
  • position: fixed
  • specifying any attribute above in will-change even if you don't specify values for these attributes
  • elements with -webkit-overflow-scrolling set to "touch"
Community
  • 1
  • 1
Scott Weaver
  • 7,192
  • 2
  • 31
  • 43