<div class="box"></div>

@property --p1{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p2{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --p3{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  width:300px;
  height:200px;
  border:1px solid;
  margin:auto;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.box:before {
  content:"";
  position:absolute;
  inset:0 calc(50% - 20px) 10px;
  background:
    linear-gradient(currentColor 0 0) top/20% 90%,
    radial-gradient(farthest-side,currentColor 92%,#0000) bottom/40px 40px;
  background-repeat:no-repeat;
  transform:rotate(calc((var(--p1) + var(--p2) + var(--p3))*1deg  ));
  transform-origin:top;
}
.box:hover::before {
  --p1:0.1;
  --p2:-0.1;
  --p3:0.1;
  transition:
      --p1 .5s cubic-bezier(0.5,500,0.5,-400),
      --p2 .5s cubic-bezier(0.5,-250,0.5,150) .5s,
      --p3 .5s cubic-bezier(0.5,50 ,0.5,0)  1s;
}