style.css

.searchBox{
    height: 250px;
    color: rgb(255, 255, 255);
    /* 박스 중앙 정렬 코드 */
    display: flex;      /* flexbox 적용 */
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-color: rgb(32, 32, 32);
    background-image: url("https://media.discordapp.net/attachments/1244516648866680885/1267482729818357780/da5bcd90a464c706.jpg?ex=66a8f2c7&is=66a7a147&hm=53b4289ae0b0960f1b7d87c4c65ea76ca8e4c9f79e4513b251e96778482ea06d&=&format=webp&width=1920&height=560");
}

#movieBox {
    box-sizing: border-box;
    width: 250px;
    height: 350px;
    margin: 20px auto;
    background-color: rgb(240, 240, 240);
    border-radius: 10px;/*곡률*/
    transition: all 1s cubic-bezier(.17,.67,.53,.58); /*움직임*/
    box-shadow: 1px 1px 10px;/*그림자*/
    transform-style: preserve-3d;
    
}

#movieBox:hover{
    box-shadow: 10px 10px 15px rgb(58, 58, 58);
    transform: rotateY(180deg)
}

.posterImg{
    width: 100%;
    height: 80%;
    z-index: 2;
    position: absolute;
    border-radius: 10px 10px 0px 0px;
    justify-content: center;
    display: flex;
    overflow: hidden;
    align-items: center;
    backface-visibility: hidden;
    
    background-color: blueviolet;
}

.movieName {
    width: 100%;
    height: 20%;
    font-size: 15px;
    z-index: 2;
    position: relative;
    top: 280px;
    margin-top: 5px;
    border-radius: 0px 0px 10px 10px;
    justify-content: center;
    display: flex;
    overflow: hidden;
    align-items: center;
    backface-visibility: hidden;

    background-color: aqua;
    
}

.movieView {
    width: 100%;
    height: 100%;
    position: relative;
    top: -70px;
    z-index: 1;
    transform: rotateY(180deg);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;

    background-color: rgb(187, 255, 0);
}