CSS - rotate 좌우/상하 뒤집기 (3D)

CSS가 하도 좋아져서 다양한 애니메이션도 가능한데 항상 문제는 브라우저 호환!

 

 

마우스 올리면 휘릭 뒤집는건 rotateX 나 rotateY를 써서 쉽게 했는데.. 3D 로 보여지게 하려니 손이 좀 가고..

특히 그냥 뒤집기만 하는게 아니라 뒤집으면서 뒷면에 있는게 앞으로 나오는 식으로 하려니 손이 더 가고..

다 해놓고 보니 Edge 에선 뒷면이 안나오네! 그래서 알아보니 판을 통체로 하나만 돌리면 안되고 앞면 뒷면을 동시에 돌려줘야 한다니...

 

아래는 예시: (Result 탭을 눌러보자)

https://jsfiddle.net/alikong/ac5ghs6p/

 

암튼 해결!