Css Flip

Use CSS to achieve animation effects of page or image flipping

There are often animation interactive effects in web development. In the past, we could only use JavaScript to achieve it. As browsers support the new features of CSS3 better and better, many special effects can be achieved through CSS code.

When we browse the website, we can often see the animation effect of the picture flipping, such as shown in Demo 1.

Can this flip animation effect be achieved using pure CSS? The answer is yes.

We know that the transform property of CSS3 is very powerful and can achieve 2D or 3D rotation, scaling, movement or tilt.

The above Demo1 is a 3D flip along the Y axis. We can think of using the rotateY() method of the transform attribute to achieve this.

Sample code

HTML code

<div class="rotate-container">
	<div class="flipper">
		<div class="front">
<!-- Previous content -->
		</div>
		<div class="back">
<!-- Back content -->
		</div>
	</div>
</div>

CSS code

.rotate-container:hover .flipper{
	transform: rotateY(180deg);
}

.rotate-container, .front, .back {
	width: 320px;
	height: 480px;
}

.flipper {
	transition-duration: 1s;  
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
}

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

Explanation of key technical points:

1.transform: deformation

transform: rotateY(180deg) means rotating 180 degrees along the Y axis.

2.transform-style: Specify the space where the child elements of this element are located.

Specifies whether the element’s children appear to lie in three-dimensional space or are flattened in the element’s plane.

The transform-style attribute has two parameters, flat and preserve-3d. flat is the default value, specifying that the child element is located in the plane where this element is located; preserve-3d specifies that the child element is positioned in a three-dimensional space.

3.backface-visibility specifies whether the element is visible when rotated to the back.

The default is visible, that is, the back side is visible, as shown in Demo2.

In Demo1, since it is another picture that is flipped over, the back face is not visible when it is set to backface-visibility:hidden.

4.transition-duration: Indicates the time it takes to complete the transition effect.

transition-duration:1s can be used in the abbreviated form transition:1s.

5.position:absolute: absolute positioning.

Use absolute positioning position:absolute to place the two elements before and after flipping in the same position.

Contents