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)

Example of implementing todo application with Vue

Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)

Preface The Windows system that can be activated ...

Example of making a butterfly flapping its wings with pure CSS3

Example of implementing todo application with Vue

How to check where the metadata lock is blocked in MySQL

Vue2/vue3 routing permission management method example

Detailed explanation of using pt-heartbeat to monitor MySQL replication delay

Tutorial on installing MySQL 5.7.9 using RPM package under CentOS 7

Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration

Detailed explanation of the usage and differences between indexes and views in MySQL

A simple method to be compatible with IE6's min-width and min-height

How to view version information in Linux

Detailed explanation of function classification and examples of this pointing in Javascript

Recommend

How to start jar package and run it in the background in Linux

Summary of common functions of PostgreSQL regular expressions

How to convert extra text into ellipsis in HTML

Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)

Detailed examples of converting rows to columns and columns to rows in MySQL

Specific use of MySQL internal temporary tables

Detailed explanation of JavaScript error capture

HTML head structure

Setting up shadowsocks+polipo global proxy in Linux environment

js to achieve a simple carousel effect

Understanding the Lazy Loading Attribute Pattern in JavaScript

Summary of MySQL common SQL statements including complex SQL queries

Implementation of waterfall layout in uni-app project

Simply master the use of horizontal line annotations and code comments in HTML

Summary of three rules for React state management