Example of making a butterfly flapping its wings with pure CSS3

Pure CSS3 makes a butterfly flapping its wings, see the effect first

How is it? The effect is pretty good, right?

Above code:

html

<div id="butterfly">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>
</div>

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;
        }

Before that, let me introduce a few CSS properties;

@keyframes

With the @keyframes rule, we can create animations
The principle of creating animation is to gradually change one set of CSS styles to another set of styles.
Specify the time at which the change should occur as a percentage, or by using the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start time of the animation, 100% is the end time of the animation

transform: rotateY()

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, translate or skew an element.
rotateY() defines a 3D rotation along the Y axis.

This picture clearly illustrates the xyz axes. In fact, students who have learned 3D modeling software such as 3DS MAX should be more familiar with the directions of these three axes.

Implementation idea: First use the child and father to absolutely position the left wing, right wing, and body, and put them together. Then use transform's rotateY to rotate it along the y-axis. Use @keyframe animation for rotation here, and then repeat the action.

We should also focus on the transform-style: preserve-3d; property. According to W3C, it enables the transformed child elements to retain their 3D transformation. That is, all sub-elements are presented in 3D space. On the contrary, if it is set to flat, all sub-elements are presented in 2D space.

Demo download address

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Object-Oriented Programming with XHTML and CSS

>>: MySQL 8.0.23 Major Updates (New Features)