perspective
.png)
<style>
.원본 {
display: flex;
justify-content: space-between;
width: 1000px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 400px;
}
.회전패널 {
width: 200px;
height: 200px;
background: aqua;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="원본">
<div class="회전패널"></div>
<div class="회전패널"></div>
<div class="회전패널"></div>
<div class="회전패널"></div>
<div class="회전패널"></div>
<div class="회전패널"></div>
</div>
</body>
</html>같은 각도로 움직였지만 소실점이 다르기 때문에 똑같은 박스로 나오지 않는다.
- Y축 회전 : 우측 중앙 기준
- X축 회전 : 아래 중앙 기준
기본 값은 perspective-origin: 50% 50%; 이 값을 사용해 조정이 가능하다.
오늘의 회고
원근법 각도 기준이 어디인지 아직은 이해하기 어렵다. 역시 많이 해보는게 답인거 같다.
강사님께서 좋은 말씀을 많이 해주셨다. 많이 써서 익숙해지자 💪💪
