How to implement image flipping in CSS3

Today I will share with you how to use the knowledge in CSS3 to create an image flip function. The image flip effect in CSS3 is mainly achieved by setting transition animation and transform rotation animation

【Recommended courses: CSS3 Tutorial】

##Case Analysis

The idea of ​​the picture flipping effect: first use positioning to overlap the two pictures together, and also need to hide the picture on the back, so that the effect is There is only one picture on the page, but when the mouse is triggered, the picture behind is rotated and displayed in the front, while the picture originally in the front is rotated and hidden in the back.

(1) position: positioning

relative: relative positioning

absolute: absolute positioning

(2) backface-visibility: hide the rotated div The back of the element

visible: the back is visible

hidden: the back is invisible

(3) z-index attribute

Set the element Stacking order, the larger the value set, the higher the level, and the earlier it is on the page

(4) transition-property: Set the name of the CSS property that requires a transition effect

none: No attribute will get the transition Effect

all: All properties will get the transition effect

property: Define a list of CSS property names that apply transition effects, the list is separated by commas.

(5) transition-duration: How many seconds or milliseconds it takes to complete the transition effect

(6) Transition-timing-function: The speed curve to complete the transition effect

linear: Uniform speed

ease: first slow, then fast and then slow again. Specifies the transition effect that starts at a slow speed, then becomes fast, and then ends at a slow speed (cubic-bezier(0.25,0.1,0.25,1)).​ ​

cubic-bezier(n,n,n,n): Define your own value in the cubic-bezier function. Possible values ​​are values ​​between 0 and 1.

(7) transition-delay: whether the transition effect is delayed and when it starts

(8) transform attribute: the element applies 2D or 3D transformation

Example: rotateX( 180deg): Rotate 180 degrees along the

##Complete code:

This case is run in the chrome browser

<br/>

Rendering

Dynamic Effect

Summary: The above is the entire content of this article. Through the sharing of this article, I hope everyone will have a certain understanding of the flipping of pictures. .

The above is the detailed content of How to implement image flipping in CSS3. For more information, please follow other related articles on the PHP Chinese website!