Use the CSS3 backface-visibility property to create a rollover animation effect

Summary: by Backface-visibility:hidden; property, we can make an element disappear after flipping, which is the ability to put another element on the back of it, creating the effect of another element after the element is flipped. ...

Using the CSS3 backface-visibility property, we can make a lot of interesting animation effects. What do you see when you flip a single element? Normally, we should see the back of the element, which is normal, but sometimes we want to flip an element and see another element.

View Demo Plugin Download

Using the CSS3 backface-visibility property, we can make a lot of interesting animation effects. What do you see when you flip a single element? Normally, we should see the back of the element, which is normal, but sometimes we want to flip an element and see another element. By Backface-visibility:hidden, we can make an element disappear after flipping, which can be done by using another element on the back of it, thus creating an effect on the other element that occurs after an element is flipped.


What is backface-visibility


The Backface-visibility property is related to the 3D transform effect and is used to determine whether the back of an element is visible to the user when it is facing. For example, the following picture shows the two round elements, the front one is the front, the back one is the back. When it flips to the back, the text above should be mirrored on the front, which is the default behavior.

Browser compatible


All modern browsers support the Backface-visibility property. Chrome, Safari, and opera browsers need to use-webkit-'s vendor prefix. This property is supported by Ie10+ 's IE browser. For browser support for animations and transforms, you can view the can I use to get relevant information.


Application examples


In this article we will enumerate 4 elements using the Backface-visibility flip example.


Spinning doughnuts.

This demo is a good example of understanding the Backface-visibility attribute. When we flip the donut, we don't want to see its front face again. So we need another picture representing the back of the doughnut to replace the original back. We will place the "front" face and "back" main in the same position, and the "front" face is in front of the "Back" face. The "front" face uses Backface-visibility:hidden to hide the back. They rotate synchronously along the y-axis, and the "front" face disappears while the other picture is displayed when the back is turned.

img {  position:absolute;  Animation:turn 2s infinite;}  . Donut-front {  z-index:5;  Backface-visibility:hidden;}  @keyframes Turn {to  {    transform:rotatey (360deg);  }}     

Both pictures use the same animation, except that the first picture is hidden when it is rotated to the back, and this is the second picture that is naturally displayed.

Spilled coffee.

This demo has two coffee mug pictures: One is the front of the cup, the back of a cup. The drip of coffee is a separate picture, it is hidden at first, it is rotated 180 degrees on the x-axis, which allows us to begin to see the back of it, and because it is backface-visibility:hidden, so it is invisible.

This time the coffee cup is flipped along the x-axis:

img {  position:absolute;  animation:turn-over 2s 700ms infinite;}  . Cup-front {  z-index:3;  Backface-visibility:hidden;}  . Coffee-drip {  position:absolute;  Transform:rotatex (180deg);  Backface-visibility:hidden;  Animation:spill 2s infinite;  animation-delay:700ms;}  @keyframes Turn-over {to  {    Transform:rotatex ( -180deg);  }}  @keyframes spill {to  {    transform:translatey (200px);  }}         

The door of the shop

There are three pictures: one is the front of the door without a sign, one is the back of the door without a sign (there is a difference in color), and the other is a sign hanging on the door. All two doors have the same size window on the picture, and the window will display normally when the door is flipped to the back.

img {  position:absolute;  Transform:perspective (600px) Rotatey (45deg);  Transform-origin:right;  Animation:open 4s infinite;}  . Front {  z-index:2;  Backface-visibility:hidden;}  @keyframes Open {  50% {    transform:perspective (600px) Rotatey ( -140deg);  }}         

 

When the door opens, the "front" face disappears, "back" is displayed, and the window on the door remains intact.

Flip the Box

What happens when you use the Backface-visibility property in 3D space? This example shows a 3D rotated box animation: The box element contains 6 faces, which are positioned separately on the X, y, and Z axes using translations and rotations to form a cube.

Each side of the box is set opacity to 0.6, which means that if there is no backface-visibility:hidden, we can see all the faces of the box.

The face of the box is set to Backface-visibility:hidden at the beginning, and when we click the Backface-visibility button, the backface-visibility:visible is triggered; The 6 faces of the box are visible.

Summary

The Backface-visibility property allows us to use the back of the element to produce various effects. With this property we can make a variety of interesting effects. Hopefully through this article you will have a further understanding of the Backface-visibility attribute.

via:http://www.htmleaf.com/ziliaoku/... g/201504151686.html

Use the CSS3 backface-visibility property to create a rollover animation effect