transform: rotateY(180deg);

아래의 코드가 구현되어있는 페이지이다.

CSS

.baseball {
    margin: auto;
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

perspective:1000px 각 구역이 회전시에 깊이감을 나타내기위해 사용

.baseball-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: 0.6s;
transform-style: preserve-3d;
box-shadow: 3px 4px 8px 0 rgba(0,0,0,1);
}

transition: 0.6s 뒷배경을 보이는데 까지 걸리는 시간을 0.6초로 설정하였고.
transform-style: preserve-3d; 3d공간에서 입체적으로 회전할수있도록 했습니다.

.baseball:hover .baseball-inner {
transform: rotateY(180deg);
}

각 개체에 마우스를 올렸을시에 Y축을 기준으로 180도 돌아갈수 있도록 했습니다.

.baseball-front, .baseball-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

앞면이 보일땐 뒷면이, 뒷면이 보일땐 앞면의 내용이 보이지않도록 backface-visibility: hidden; 을 사용했습니다.

.baseball-back {
display: flex;
flex-direction: column;
justify-content: center;
background-color: whitesmoke;
transform: rotateY(180deg);
}

평시에 뒷면으로 돌아가 있게 하기위해 transform: rotateY(180deg); 을 사용했습니다.

.baseball-back > p {
padding: 0, 0, 10px, 10px;
}