How to achieve 3D flip effect in css3

In CSS3, you can use the transform attribute with 3D rotation functions such as rotateY() and rotateX() to achieve a 3D flip effect. rotateX() can rotate an element by a given angle around its X axis, and rotateY() can rotate an element by a given angle around its Y axis.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Realize the flipping of a picture

1. HTML structure

 
 
Front
 
Back
 
 

The structure of the above HTML is:

• p.stage specifies a 3D stage, basically all implementations using CSS3 3D transformation will do this, specifying perspective styles to achieve perspective effects
• p.flipBox is the real implementation of translation The container on the front will be 3D transformed later
• figure represents two pictures, one is the front and one is the back

The idea is: combine figure.front and figure.back flips the front and back of the image. After the image is flipped, figure.back will become the side facing the user, and figure.front will face away from the user.

In the initial state, figure.back is flipped horizontally (i.e. transform: rotateY(180deg)), so that the text on the back will be displayed upright after the image is flipped (otherwise, the text on the back will be upside down after flipping it over) ——Because it was upright before the reversal~).

3. CSS structure

body,figure { margin: 0; padding: 0; } .stage { width: 200px; height: 100px; margin: 40px; perspective: 1000px; } .flipBox { width: 200px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; } .pic { width: 200px; height: 100px; font-size: 24px; color: #fff; line-height: 100px; text-align: center; position: absolute; top: 0; left: 0; backface-visibility: hidden; } .front { background: #f00; } .back { background: #090; transform: rotateY(180deg); }

Now analyze the CSS of each element:

body,figure { margin: 0; padding: 0; }

Nothing to say, remove the inner and outer margins!

.stage { width: 200px; height: 100px; margin: 40px; perspective: 1000px; }

Define styles for the 3D stage. The margin is to have some distance from the left and top of the browser so that the transformation can be displayed more completely. Perspective specifies the distance between the 3D element and the camera (or human eye). The smaller the value, the closer the 3D element is to the human eye. The larger the value, the farther the 3D element is from the human eye.

.flipBox { width: 200px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; }

Define styles for flipping boxes. This element is the one that actually performs the 3D transformation. Its position attribute is to create anchor points for its two child figure elements so that the two child figure elements can be positioned at the upper left corner of p.flipBox to align the two pictures. The transform-style attribute is required, which specifies the form in which the descendant elements of the p.flipBox element are transformed in 3D (preserve-3d means that the descendant elements are still transformed in 3D mode; the other value flat means that only p .flipBox performs 3D transformation, and the descendant elements are only the content in the p.flipBox plane without 3D transformation), which is very similar to the pseudo 3D in After Effect. Transition stipulates that only the transform attribute will be transformed, and the time is 1s.

.pic { width: 200px; height: 100px; font-size: 24px; color: #fff; line-height: 100px; text-align: center; position: absolute; top: 0; left: 0; backface-visibility: hidden; }

Specifies a unified style for the two pictures (the two figures here). Use absolute positioning to position the upper left corner of p.flipBox, and the two figures are the same size, so they overlap perfectly. Backface-visibility is an important attribute. It specifies whether the 3D element facing away from the user is displayed. It should be set as hidden (hidden), otherwise the back side will be displayed when the back side should not be displayed. For example, in the initial state, figure.back obviously should not be displayed, but because figure.back is post-rendered, it will be overlaid on figure.front. We previously specified transform: rotateY(180deg) for figure.back, so figure. The front is facing away from the user and will not be displayed. For another example, after flipping, figure.front will be in front of figure.back, but at this time figure.front will face away from the user, so it is hidden by backface-visibility, which is exactly what we want.

.front { background: #f00; }

It is stipulated that the front side of the picture should be red.

.back { background: #090; transform: rotateY(180deg); }

specifies that the back of the picture is green. At the same time, transform: rotateY(180deg) specifies that in the initial state, figure.back is flipped horizontally by 180°.

3. Start rotating the picture

.stage:hover .flipBox { transform: rotateY(-180deg); }

When the mouse moves into the 3D stage, rotate the p.flipBox by -180° to achieve the picture flipping effect. It is also possible to rotate p.flipBox 180° here, but the direction of rotation is different.

2. Case

1. Picture preparation

is To reduce HTTP requests, sprites are used here.

The size of the picture is 200*200, divided into upper and lower parts. The upper part is the front of the flipped picture (black and white), and the lower part is the back of the flipped picture (color). The logos above and below have been centered horizontally and vertically to ensure that the logos are in the same position before and after flipping.

2. Code implementation

      
  
 
 
  
Fun Games
 
 
  
 
  
Man Style
 
 
  
 
  
Sims.
 
 
  
 
  
Googla
 
 
  
 
  
JavaScript
 
 
  
 
  
Felix
 
 
  
 
 
  

(Learning video sharing:css Video tutorial)

The above is the detailed content of How to achieve 3D flip effect in css3. For more information, please follow other related articles on the PHP Chinese website!