アニメーションを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>p{
  color: red;
  font-weight:900;
  font-size: 14px;
  text-align:center;
  padding-top: 20px;
}
#star1,#star2,#star3{
  width:100px;
  height:100px;
  margin:40px auto;
  background:#000;
  transition: 1s all ease 0s;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#star1:hover{
  transform:perspective(300px) scaleZ(3) rotateY(70deg) rotateX(180deg) scaleX(1.5);
}

#star2:hover{
  transform: rotateY(20deg) skewY(20deg);
}

#star3:hover{ transform: rotateX(30deg) rotateY(-180deg) rotateZ(36000deg);
}</style>
</head>
<body>
<p>マウスポインタを星の上に持ってきてください</p>
<div id="star1">
</div>
<div id="star2">
</div>
<div id="star3">
</div>
<script>
</script>
</body>
</html>

p{
  color: red;
  font-weight:900;
  font-size: 14px;
  text-align:center;
  padding-top: 20px;
}
#star1,#star2,#star3{
  width:100px;
  height:100px;
  margin:40px auto;
  background:#000;
  transition: 1s all ease 0s;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#star1:hover{
  transform:perspective(300px) scaleZ(3) rotateY(70deg) rotateX(180deg) scaleX(1.5);
}

#star2:hover{
  transform: rotateY(20deg) skewY(20deg);
}

#star3:hover{ transform: rotateX(30deg) rotateY(-180deg) rotateZ(36000deg);
}