Ошибка появления псевдоэлементов CSS, когда я пытаюсь использовать преобразование или z-индекс ⇐ CSS

[Anonymous]

Когда я пытался создать определенную фигуру с помощью CSS, чтобы попрактиковаться в том, что я узнал о свойстве преобразования, особенно о свойстве поворота, я столкнулся с проблемой: когда я пытаюсь применить это свойство к родительскому элементу, фон элементов перекрывает фон родительского элемента. Странно то, что текст в родительском элементе не исчезает, а остается видимым.
Форма, которую я пытался создать

Код: Выделить всё

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}

div {
background-color: #eee;
color: bisque;
width: 300px;
height: 200px;
margin: 50px auto;
font-family: Arial, sans-serif;
font-size: 3em;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* Problem is here */
/*
transform: rotate(1deg);
z-index: 999;
*/
}

div::before {
content: "";
background-color: chocolate;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
transform: rotate(5deg);
}

div::after {
content: "";
background-color: bisque;
width: 100%;
height: 100%;
position: absolute;
z-index: -2;
transform: rotate(-5deg);
}

Попробуйте здесь
Проведя небольшое исследование, я обнаружил, что свойство преобразования делает недействительным z-индекс, и тем не менее, независимо от того, насколько высоки значения ​​Я даю родительский элемент, проблема остается.

Подробнее здесь: https://stackoverflow.com/questions/793 ... or-z-index