[CSS] 카드 Flip 브라우저 대응

웹표준으로 픽스가 안 된 스펙들 적용시 각 브라우저마다 접두어를 정해놓음

-webkit- = 사파리, 크롬
-moz- = 모질라계열
-ms- = IE...ㅋㅋ
-o- = 오페라

사파리

backface-visibility: hidden;

이 속성이 안 먹힘

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

표준속성은 반드시 뒤에 적어야한당! 생으로 css 짤 일은 많지 않겠으나 표준속성을 먼저 적어버리면, 크롬에서 -webkit-이 적용되는 거임(kinda 실험용 버전)

IE

이 친구는 이제 빠이빠이로 알고 있는데..

IE는 preserve-3d가 안 먹힘. 바로 아래 자식에만 3D 적용 가능

1. div.world 바로 안에 div.card 날려버리고
2. div.world 바로 아래 자식으로 F, B 넣어주기
3. hover 할 때 각각 돌리기
   📌 포인트: B는 이미 rotateY(180deg) 해준 상태라 => rotateY(360deg)

.world:hover .card-side-front {
    transform: rotateY(-180deg);
}

.world:hover .card-side-back {
    transform: rotateY(360deg);
}