Example of making a butterfly flapping its wings with pure CSS3

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

  1. With the @keyframes rule, we can create animations
  2. The principle of creating animation is to gradually change one set of CSS styles to another set of styles.
  3. 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%.
  4. 0% is the start time of the animation, 100% is the end time of the animation

transform: rotateY()

  1. The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, translate or skew an element.
  2. 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)

Recommend

Three solutions for sub-functions accessing external variables in JavaScript

Preface When we write web pages, we will definite...

Detailed Tutorial on Installing MySQL 5.7 on RedHat 6.5

RedHat6.5 installation MySQL5.7 tutorial sharing,...

How to view the running time of MySQL statements through Query Profiler

The previous article introduced two methods to ch...

MySQL solution for creating horizontal histogram

Preface Histogram is a basic statistical informat...

SQL method for calculating timestamp difference

SQL method for calculating timestamp difference O...

How to use the markdown editor component in Vue3

Table of contents Install Importing components Ba...

Solution to the docker command exception "permission denied"

In Linux system, newly install docker and enter t...

How to deploy k8s in docker

K8s k8s is a cluster. There are multiple Namespac...

Several things to note when making a web page

--Homepage backup 1.txt text 2. Scan the image 3. ...

How to install common components (mysql, redis) in Docker

Docker installs mysql docker search mysql Search ...

How to install nginx on win10

Because the company asked me to build a WebServic...

In-depth understanding of umask in new linux file permission settings

Preface The origin is a question 1: If your umask...

Eight examples of how Vue implements component communication

Table of contents 1. Props parent component ---&g...

Windows 10 installation vmware14 tutorial diagram

Software Download Download software link: https:/...