inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

인터랙티브 웹 개발 제대로 시작하기

전진! 3D 스크롤 5

transform-origin을 써서 왼쪽벽 오른쪽벽 세워도 되겠죠??

362

ODeorain
0

/* 벽들 */
#house{
    position:absolute;
    width:100%;height:100vh;
    transform-style:preserve-3d;
}

/* 좌측 우측  */
.wall-left,.wall-right{
    position:absolute;
    top:0;
    width:500vw;height:100vh;
    background:linear-gradient(to right, rgba(255,255,255,.3), rgba(255,255,255,.8));
    transform-origin:left center;
    transform:rotateY(-90deg);
}
.wall-left{left:0;}
.wall-right{left:100%;}

답변 0