1. HTML의 예제입니다.
wall-front에 style="--i:숫자값" 이런식으로 적용되어있지용
<ul id="house">
<li class="wall-left"></li>
<li class="wall-right"></li>
<li class="wall-front" data-front="a" style="--i:0">
<div class="content">
<h2 class="title">001. 안녕하세요</h2>
</div>
</li><!-- a -->
<li class="wall-front" data-front="b" style="--i:1">
<div class="content">
<h2 class="title">002. Hello</h2>
</div>
</li><!-- b -->
<li class="wall-front" data-front="c" style="--i:2">
<div class="content">
<h2 class="title">003. Hola</h2>
</div>
</li><!-- c -->
<li class="wall-front" data-front="d" style="--i:3">
<div class="content">
<h2 class="title">004. こんにちは</h2>
</div>
</li><!-- d -->
</ul><!-- house -->
2.CSS
여기서 --length는 벽의 넓이입니다. 값은 아무거나 주셔도 상관없어요.
--per는 벽의 갯수만큼 나눠주시면 됩니다. 예제에선 벽이 4개라서 calc(--length/4)를 했어요
:root{
--length:500vw;
--per :calc(500vw / 4);
}
그리고 나서 .wall-front에 다음과 같이 적용해주시면 자동으로 위치가 따다닥 들어갑니당
/* 정면 벽 */
.wall-front{
position:absolute;
top:0;left:0;
width:100%;height:100vh;
background:rgba(255,255,255,.5);
box-shadow:
2rem 0 2rem rgba(105, 70, 37, .2)
,-2rem 0 2rem rgba(105, 70, 37, 0.2);
/* 개별 z-index */
transform:translateZ(calc(var(--length) - (var(--per) * (var(--i) + 1))));
}
