Имеется блок, по наведении на него он переворачивается на 180 градусов, на нем так же есть текст. После переворота текст так же отображается(перевернутым), а хотелось бы, чтобы он оставался как-бы на задней стороне. Я думал использовать x-index: -1, но похоже, что он работает только когда элементы неподвижны.
div {
height: 200px;
width: 200px;
transition: transform 0.4s;
}
div > div {
background: linear-gradient(yellow, deepskyblue);
border-radius: 10px;
}
div:hover > div {
transform: rotateY(180deg);
}
<DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<div>
<p> abacaba </p>
</div>
</div>
</body>
</html>