使用css3怎么实现一个煽动翅膀的蝴蝶

今天就跟大家聊聊有关使用css3怎么实现一个煽动翅膀的蝴蝶，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

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

在这之前介绍几个css属性；

@keyframes

1. 通过 @keyframes 规则，我们能够创建动画

2. 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式

3. 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

4. 0% 是动画的开始时间，100% 动画的结束时间

transform: rotateY()

1. transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2. rotateY()定义沿着 Y 轴的 3D 旋转。

看完上述内容，你们对使用css3怎么实现一个煽动翅膀的蝴蝶有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。