Using CSS3 to make the code for wings-flapping butterflies

This article mainly introduces the pure CSS3 to make wings of the butterfly's example of the relevant information, the content is very good, and now share to everyone, but also for everyone to make a reference.

Pure CSS3 make Wings of the butterfly, first look at the effect

What's the effect?

On the code:

Html

<p id= "Butterfly" >    <p class= "leftside" ></p>    <p class= "Body" ></p>    <p class= "Rightside" ></p></p>

Css

body{Background:url ("./images/bg.jpg") no-repeat;            } #butterfly {width:600px;            height:500px;            position:relative;            Transform:scale (0.35);        transform-style:preserve-3d;            }. leftside{width:267px;            height:421px;            Background:url ("./images/leftside.png") no-repeat;            Position:absolute;            left:26px;            top:40px;            Animation:left 2s infinite;        z-index:9999;                } @keyframes Left {0%{transform:rotatey (0deg);                Transform-origin:right Center;            perspective:201px;                } 50%{Transform:rotatey (70deg);                Transform-origin:right Center;            perspective:201px;                } 100%{Transform:rotatey (0deg);                Transform-origin:right Center; Perspective:201px;                }} @keyframes Right {0%{transform:rotatey (0);                Transform-origin:left Center;            perspective:201px;                } 50%{Transform:rotatey ( -70deg);                Transform-origin:left Center;            perspective:201px;                } 100%{Transform:rotatey (0);                Transform-origin:left Center;            perspective:201px;            }}. body{width:152px;            height:328px;            Background:url ("./images/body.png") no-repeat;            Position:absolute;            Margin:auto;            left:0;            right:0;            bottom:0;            top:0;        z-index:9999;            }. rightside{width:284px;            height:460px;            Background:url ("./images/rightside.png") no-repeat;            Position:absolute; Right:26px;            top:58px;            Animation:right 2s infinite;        z-index:9999; }

A few CSS properties are introduced before this.

@keyframes

1. By @keyframes rules, we can create animations

2. The idea of animating is to gradually change a set of CSS styles to another set of styles

3. The time at which the change occurs is specified as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%.

4. 0% is the start time of the animation, and the end time of the 100% animation

Transform:rotatey ()

1. The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements.

2. The Rotatey () defines a 3D rotation along the Y-axis.

This diagram is a very intuitive explanation of the XYZ axis, in fact, the students who have learned 3DS Max 3d modeling software should be more familiar with this 3-axis point.

Realization of the idea: first with the son of the father of the left wing, right wing, and the body of the absolute positioning, put together, and then use transform Rotatey to rotate along the y axis, rotate here using @keyframe animation, and then repeat the action.

It is also important to introduce the following transform-style:preserve-3d; This property, the description of the "a" is to make the converted child elements retain their 3D conversion. That is, all child elements are rendered in 3D space, and the opposite is set to flat, then all child elements are rendered in 2D space.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!