Проблема решена.
Как выяснилось, дочернии элементы не могут быть выше или ниже родительских. Поэтому пришлось пойти таким образом, создать пустышку-элемент.
Исправленный код:<!DOCTYPE html>
<html>
<head>
<style>
.fon {
background-color: yellow; border: 6px solid dimgray;
width: 500px; height: 300px; position: relative;
z-index: 0;
}
.main {
background-color: red; border: 3px solid dimgray;
width: 60%; height: 60%; left: 20%; bottom: 0; position: absolute;
z-index: 1;
}
.child-left {
background-color: green; border: 3px solid dimgray;
width: 20%; height: 80%; left: 10%; position: absolute;
z-index: -1;
}
.child-right {
background-color: green; border: 3px solid dimgray;
width: 20%; height: 80%; right: 10%; position: absolute;
z-index: -1;
}
.dummy {
width: 100%; height: 100%;
transform: rotate(0.1turn);
}
</style>
</head>
<body>
<div class="fon">fon
<div class="dummy">
<div>
<div class="main">main</div>
</div>
<div class="dummy">
<div class="child-left">child</div>
<div class="child-right">child</div>
</div>
</div>
</div>
</body>
</html>
Теперь z-index можно применить к элементам правильно и ко всему прочему child-элементы могут унаследовать трансформации.
Такие дела.