css 3D 상자 애니메이션

상자를 뒤집어 부모 용기에 놓고 애니메이션을 촉발하는hover를 부모 용기에 연결합니다.그렇지 않으면 360, 소고 등 브라우저에서 3D 상자에 호버를 직접 연결하면 떨림 현상이 나타난다.이 예에서 div는 3D 상자의 부모 용기를 담고 perspective 속성을 설정하여 더 좋은 3D 투시 효과를 얻는다.또한, 이것은 상자를 뒤집은 후 크기가 변하게 하고 뒤집은 상자를translate3d(0,-50px,0)로 설정한다.이로써 상자의 원래 크기를 회복시킨다.주로: before 위조 속성은 상자에 측면을 추가하고 위치를 정하여 정면의 바로 아래에 놓고 회전시켜 정면에 수직으로 한다(transform-origin: 50% 0을 설정해야 한다. Y축 0의 각도를 회전 중심으로 한다)div에 div:hover를 귀속시킨다. 그의 자원소span의transform 속성이 변화하여 반전 동작을 한다.