今天就跟大家聊聊有关使用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
通过 @keyframes 规则，我们能够创建动画
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间
transform: rotateY()
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotateY()定义沿着 Y 轴的 3D 旋转。
看完上述内容，你们对使用css3怎么实现一个煽动翅膀的蝴蝶有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
