CSS3 3D Flip Animation

CSS3 Animation Properties:
Transform (Transformation): Changes in size, position, color, deformation, etc.
Transition (Transition): The animation generated during the transition from the initial state to the end state
Animation (animation): Defining Keyframe Animations

CSS3 can achieve a variety of animation effects, the following is the CSS3 to achieve a 3D flip animation effect.

<Divclass= "Container">   <Divclass= "wraphover> <div class="Wrap ">           <Divclass= "Font">               <imgsrc= "Img/01.png">           </Div>           <Divclass= "Back">               <imgsrc= "Img/02.png">           </Div>        </Div>    </Div></Div>

. Container{Perspective:800px;Perspective-origin:50% 50%;}//Create a 3D environment. Wraphover{width:200px;Height:200px;Overflow:Hidden;}. Wrap{position:relative;backface-visibility:Hidden;Transform-style:preserve-3d;}. Wrap Div{position:Absolute;Top:0; Left:0;}. Font{backface-visibility:Hidden;}. Back{backface-visibility:Hidden;Transform:Rotatey (180deg);}. Wraphover:hover Wrap{Transform:Rotatey (180deg);}

Property Description:
Perspective specifies the distance between the observer and the Z=0 plane, perspective-origin specifies the pivot point coordinate value, first using the perspective and Perspective-origin attributes to create an environment;
Transform-style Specifies whether the child elements of an element are in a three-dimensional space, backface-visibility specifies whether the back of the element is visible to the user, and the property is not inheritable.

CSS3 3D Flip Animation