css3 动画 翅膀 震动,纯css3制作煽动翅膀的蝴蝶

纯css3制作煽动翅膀的蝴蝶,先看效果

这张图很直观的说明了xyz轴,其实学过3DS MAX这类3d建模软件的同学应该更为熟悉这个3轴的指向。

实现思路:先用子绝父相将左翅膀,右翅膀,和身体进行绝对定位,拼合在一起,然后利用transform的rotateY使其沿y轴旋转,旋转这里使用@keyframe动画,然后重复动作。

还要重点介绍下transform-style: preserve-3d;这个属性,w3c 的说明是 使被转换的子元素保留其 3D 转换。也就是所有子元素在3D空间中呈现,相反设置为flat的话,则所有子元素在2D空间中呈现

演示地址

demo下载地址

链接:https://www.jianshu.com/p/ba7a1207b988

相关资源:免费的OCR软件:蝴蝶识字OCR软件-其它工具类资源-CSDN文库

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月3日
下一篇 2021年7月3日

相关推荐