* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 1000px; /* 원근감을 생기게하는 요소. 숫자가 작을수록 더 원근감. 최상위 태그에 써야함.*/
}

.flip-btn {
    width: 200px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;  /* 텍스트가 한 줄 일때, 요소의 height 값과 line-height 값이 같으면 수직 중앙 정렬 됨*/ 
    transform-style: preserve-3d; /* 3d공간에 배치. z축이 생김*/
    transition: .5s;  /* 0.5초에 걸쳐서 이벤트 실행*/
    cursor: pointer; /* 커서를 클릭 모양으로*/
}

.flip-btn:hover{        /* 마우스 포인터가 올라갈때 이벤트*/
    transform: rotateX(-90deg); 
}

.front {
    background-color: goldenrod;
    height: 100px;
    transform: translateZ(50px);
}

.back {
    background-color: darkgoldenrod;
    height: 100px;
    transform: rotateX(90deg) translateZ(150px); /* X축으로 90도를 돌려서 위쪽 방향이 Z축이 됨.*/ 
}