Можно ли использовать css для перевода «потомка» на «родителя»? Как и «другие». Теперь похоже, что эффект - это просто масштабирование «ребенка» вместо перевода.
body{
height: 100vh;
overflow: hidden;
}
.space{
background: #000;
height: 100vh;
perspective: 1000px;
}
.layer{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(85.8deg) rotateY(0.1deg) rotateZ(-45deg);
height: 50%;
width: 50%;
perspective: 1000px;
}
#parent{
background: #fff;
}
#other{
background: #aaa;
transform: translateX(-50%) translateY(-50%) translateZ(1050px) rotateX(72.8deg) rotateY(0.1deg) rotateZ(-45deg);
}
<body>
<div class='space'>
<div class='layer' id='parent'>
<div id='child' style="transform: translateZ(200px);background: #555;width: 50%; height: 50%;"></div>
</div>
<div class='layer' id='other'></div>
</div>
</body>