style.css

* {margin: 0px; padding: 0px; box-sizing: border-box;}


html, body{
    width: 100%;
    height: 100%;
}


.container{
   width: 260px;
   height: 213px;
   position: relative;
   left: 30%;
   top: 30%;
   transition:  translate(-50%, -50%);
   /* background-color: grey; */
   perspective: 600px;
}

.butterfly{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotate3d(2,1,-1, 45deg);
}

.f-part{
    position: absolute;
    background-size: 100% 100%;
}

.butterfly .body{
    width: 26%;
    height: 80%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15%;
    background-image: url('body.png');
}

.butterfly .l-wing{
    width: calc(50% - 4px);
    height: 100%;
    left: 0px;
    animation: lwingAnimate 5s ease-in-out  infinite;
    transform-origin: right;
    background-image: url('l-wing.png');
}

.butterfly .r-wing{
    width: calc(50% - 4px);
    height: 100%;
    right: 0px;
    animation: rwingAnimate 5s ease-in-out  infinite;
    transform-origin: left;
    background-image: url('r-wing.png');
}

@keyframes lwingAnimate {
    0% { transform: rotate3d(0,1,0, 80deg);}
    50% {transform: rotate3d(0,1,0, 20deg);}
    100% {transform: rotate3d(0,1,0, 80deg);}
}

@keyframes rwingAnimate {
    0% { transform: rotate3d(0,1,0, -80deg);}
    50% {transform: rotate3d(0,1,0, -20deg);}
    100% {transform: rotate3d(0,1,0, -80deg);}
}

.shadow-left{
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(-5%);
    transform: rotate(-30deg);
}

.l-shadow{
    width: 40%;
    height: 80%;
    left: 8%;
    /* transform: translateX(-5%);
    transform: rotate(-30deg); */
    bottom: 8%;
    background-image: url('l-wing-shadow.png');
    animation: lwingShadowAnimate 5s ease-in-out  infinite;
    transform-origin: right;
    filter: blur(4px);
    opacity: 0.7;
}


@keyframes lwingShadowAnimate {
    0% { transform: scaleX(0.08);}
    20% { transform: scaleX(0.5);}
    45% {transform: scaleX(1.2);}
    100% {transform: scaleX(0.08);}
}

.shadow-right{
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateY(0%);
    transform: rotate(-35deg);
    /* perspective: 100px; */
}

.r-shadow{
    width: 40%;
    height: 70%;
    left: 45%;
    bottom: -1%;
    background-image: url('r-wing-shadow.png');
    animation: rwingShadowAnimate 5s ease-in-out  infinite;
    transform-origin: left;
    filter: blur(4px);
    opacity: 0.7;
}


@keyframes rwingShadowAnimate {
    0% { transform: scale(0.75);}
    25% { transform: scale(1);}
    45% {transform: scale(1.2);}
    100% {transform: scale(0.75);}
}