[css] transform의 한계란 어디까지인가..

transform은 필자가 개발을 처음 배웠을때부터 꽤나 잘 사용하던 css 속성이다.

다만, 그저 translate를 쓰기 위한 등용문처럼 써왔달까...허허
그 외에도 scale도 좀 사용했고, rotate가 있다는 것 정도만 알았다.

그런데 이번에 프로젝트를 진행 중 흥미로운 걸 알게되어서 블로그에 박제해두려고 한다.
이김에 transform을 제대로 알고싶기도하고.

mdn에서 소개하는 transform

translate()

보통 after나 before를 쓸 때 함께 사용했다.
브라우저와 사람의 기준점이 다르기때문에 요소의 한가운데를 중심으로 재정의하는데 주로 사용했다.
그 외에도 위치를 재조정하는데도 요긴하게 사용한다.
px, %, rem 등등 모든 단위 사용 가능하다.

• X, Y축만 가공하는것도 가능하다. 3d, Z축도 가능한데, 이건 transform의 거의 모든 속성들이 가능하다.

transform: translate(50%, 50%) // 이런식으로 사용한다.
transform: translate(0, 50%) // translateY(50%)와 같다.
transform: translate(-50%, -50%) // 마이너스 값도 사용 가능!

scale()

요소의 크기를 조절한다.
주로 hover했을때 이미지나 요소가 1.2배정도 확장되도록 할 때 사용했다.
X축이나 Y축만 늘리는 요상한 짓도 할 수 있다.(ㅋㅋㅋ)

transform: rotate(0.5turn);

rotate()

rotate는 요소의 각도를 조정한다. 양의 정수를 주면 시계방향으로 돌아가고, 음의 정수를 주면 반시계방향으로 돈다.

transform: rotate(0.5turn);

perspective()

mdn doc
2차원 인터페이스가 3차원인 경우 보는 사람의 관점을 설정한다.
즉, 시점을 바꾸는 것.

• 제일 앞에 위치시켜야한다.
  perspective를 사용해서 인덱스 모양을 만들어보려 했는데, 마음에 들지도 않고 이해도 안가서... 3d모형일때는 그나마 왜 이런 모양이 되는건지 이해가 되는데 1차원 도형의 경우에는 perspective를 썼을때 어떻게 모양이 나올지 예상도 안되고 어렵다; 그래서 때려침.

skew()

skew는 요소를 짜부시킨다. mdn에서는 '요소를 기울이는 변환' 이라고 고급지게 표현한다.
수평 및 수직 방향에서 특정 각도만큼 요소 내의 각 점을 왜곡한다고 함.

skew를 써서 마음에 드는 인덱스 모양을 구현하는 데 성공했다.
skew를 없앴을때 원래 모양은 직사각형이었음.

export const StyledTabItemLi = styled.li`
  list-style: none;
  margin: 1rem 1rem 0;
  padding: 1rem;
  position: relative;
  background-color: ${colors.yellow};
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: ${colors.yellow};
    width: 50%;
    height: 100%;
    transform: translate(150%, 0) skew(30deg);
    border-radius: 0 1rem;
  }
`;