Shulou(Shulou.com)06/02 Report--

This article mainly introduces css3 how to achieve the element left and right flip, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

Methods: 1, use "animation: animation name 5s infinite;" statement to bind animation to elements; 2, use "@ keyframes animation name {50% {transform: scale (- 1jue 1);}}" statement to control the action of the animation to achieve the left and right flip effect.

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

You can use the animation attribute and "@ keyframes" to create an animation where the element is flipped left and right. In the animation, transform: scale (- 1) is used to control the element to flip left and right.

Implementation code:

Div {width: 100px; height: 100px; background: red; margin: 100px; animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite / * Safari and Chrome * /} @ keyframes mymove {50% {transform: scale (- 1) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 50% {transform: scale (- 1Magne1) }}

Thank you for reading this article carefully. I hope the article "how to flip elements left and right" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.