Mini Projects
Movie Seat Booking (4) make Screen 3D
윰윰로그
2020. 7. 10. 19:11
parent element에 perspective 속성을
효과를 주려는 child element에 transform 속성을 줘서 3D로 만드는 방법
참고
https://3dtransforms.desandro.com/perspective
Perspective · Intro to CSS 3D transforms
Perspective To activate 3D space, an element needs perspective. This can be applied in two ways. The first technique is with the transform property, with perspective() as a function: transform: perspective(400px); For example: .panel--red { /* perspective
3dtransforms.desandro.com
/* Seat Container */
.seat-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
perspective: 1000px;
}
/* Screen */
.screen {
width: 250px;
height: 70px;
margin-bottom: 3rem;
background-color: #fff;
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
transform: rotateX(-45deg);
}
screen의 parentElement인 seat-container에 perspective:1000px;을 주고
screen에 transform: rotateX(-45deg)를 줘서
3d efffect를 만들었다.