今天就來講一下 transform-origin 的應用吧！
來做一個搖擺的球，
會長這樣

HTML
簡單的一行 span

<span></span>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
}

span {
  display: block;
  width: 100px;
  height: 2px;
  position: relative;
  background-color: #000;
  transform-origin: left center;
  animation: rrr 1s infinite alternate;
}

span::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fa0;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  border-radius: 50%;
}

@keyframes rrr {
  0% {
    transform: rotate(30deg);
    }
100% {
    transform: rotate(150deg);
    }
}

今天就先到這裡啦～
我們明天見。