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 making a butterfly flapping its wings with pure CSS3

HTML+CSS to achieve drop-down menu

Introduction to JavaScript Number and Math Objects

Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript

Basic usage of UNION and UNION ALL in MySQL

Detailed process of upgrading glibc dynamic library in centos 6.9

Rounding operation of datetime field in MySQL

9 Practical CSS Properties Web Front-end Developers Must Know

Sample code for converting video using ffmpeg command line

MySQL learning notes help document

How to allow external network access to mysql and modify mysql account password

Recommend

Teach you how to deploy Vue project with Docker

A brief discussion on the fun of :focus-within in CSS

Docker executes a command in a container outside the container

MySQL 5.7.17 installation and configuration method graphic tutorial (windows)

CSS3 realizes the glowing border effect

Summary of knowledge points about null in MySQL database

MySQL backup and recovery design ideas

Six ways to increase your website speed

HTML marquee tag usage examples

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Installation of CUDA10.0 and problems in Ubuntu

Bootstrap 3.0 study notes for beginners

Mysql dynamically updates the database script example explanation

The latest 36 high-quality free English fonts shared

SQL optimization often makes mistakes, that's because you don't understand the usage of MySQL explain plan