transform-origin原生CSS实现上下摇摆类似放风筝效果

今天俺跟大家分享一个之前工作中遇到的一个小技巧，灵感来自于营销提出的需求。

对于transform-origin这个属性，工作中我们可以说基本上是不怎么需要使用的，但是该属性对于实现一些特定的效果还是很不错的。

什么是transform-origin

MDN中的解释是：transform-origin CSS属性让你更改一个元素变形的原点。

属性：

x-offset

定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。

offset-keyword

left，right，top，bottom或center中之一，定义相对应的变形中心偏移。

y-offset

定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。

x-offset-keyword

left，right或center中之一，定义相对应的变形中心偏移。

y-offset-keyword

top，bottom或center中之一，定义相对应的变形中心偏移。

z-offset

定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。

利用动画巧妙实现

实现效果如下：

@keyframes wave {    0% {        transform: rotateZ(-5deg);             -o-transform: rotateZ(-5deg);             -ms-transform: rotateZ(-5deg);             -moz-transform: rotateZ(-5deg);             -webkit-transform: rotateZ(-5deg);         }        50% {        transform: rotateZ(4deg);          -o-transform: rotateZ(4deg);             -ms-transform: rotateZ(4deg);             -moz-transform: rotateZ(4deg);             -webkit-transform: rotateZ(4deg);            }    100% {        transform: rotateZ(-5deg);          -o-transform: rotateZ(-5deg);             -ms-transform: rotateZ(-5deg);             -moz-transform: rotateZ(-5deg);             -webkit-transform: rotateZ(-5deg);             }}

具体的样式如下：

width:177px;
height:87px
;display:block;
background:url('https://www.pipipi.net/wp-content/uploads/2019/06/2019061823571646.png') no-repeat center center  
transform-origin:left top;     
animation: wave 1.5s linear 0s alternate infinite;
-moz-animation: wave 1.5s linear 0s alternate infinite;
-webkit-animation: wave 1.5s linear 0s alternate infinite;
-o-animation: wave 1.5s linear 0s alternate infinite;
-ms-animation: wave 1.5s linear 0s alternate infinite;

以上就是实现CSS实现放风筝效果全部代码，希望帮助到需要的朋友们。