rotate-establishes-stacking-context.html

<!DOCTYPE html>
<html>
<head>
<style>

* {
  margin: 0;
  padding: 0;
}

div {
  width: 800px;
  height: 300px;
}

span {
  position: absolute;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: yellow;
}

#span1 {
  z-index: 2;
  left: 50px;
  top: 50px;
  background: red;
}

#span2 {
  z-index: 1;
  left: 100px;
  top: 100px;
  background: green;
}

#span3 {
  left: 150px;
  top: 150px;
  background: blue;
}

#div1 {
  rotate: 0deg;
}

</style>
</head>
<body>

<div id="div1">
  <span id="span1">First</span>
</div>
<div id="div2">
  <span id="span2">Second</span>
</div>
<div id="div3">
  <span id="span3">Third</span>
</div>

</body>
</html>

chromium/third_party/blink/web_tests/transforms/rotate-establishes-stacking-context.html