[css] height 길이 늘렸을 때, 위쪽 방향으로 늘어나게 하기

문제 

막대그래프(?)처럼 위쪽으로 늘어나는 사각형을 만들고자 했는데 

height길이를 늘리면 아래 방향으로 늘어나서 위치를 맞추기 쉽지 않았다 (height길이가 props에 따라 달라지게 하는 것을 구현하고 있었음)

 

내가 체크한 개수만큼 그래프의 길이가 길어져야하기 때문에 

기준이 아래쪽이 되어야했음 

 

해결

  transform: scaleY(-1);
  transform-origin: top;

 

 

요소의 가장자리를 기준으로 요소를 수직으로 뒤집어 

방향을 바꾸면 heigth를 늘렸을때 위쪽으로 늘어나는 것을 확인할 수 있었다.