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를 만들었다.
'Mini Projects' 카테고리의 다른 글
| Custom Exchage Rate Calculator (fetch API, 3rd Party API) (0) | 2020.07.16 |
|---|---|
| Video and Audio APIs (MDN 정리) (0) | 2020.07.13 |
| Movie Seat Booking (2) - CSS colors (0) | 2020.07.09 |
| Movie Seat Booking (1) HTML (0) | 2020.07.09 |
| Form Validator (5) - Logic 정리 (0) | 2020.07.09 |
