CSS_transform

transform 속성

: 요소의 모양, 크기 위치 등을 변경하는데 사용

#1. skew()

• 원하는 각도만큼 객체를 기울임
• x,y 축 나누어 속성 부여 가능
  - skew(X_deg)
  - skew(Y_deg)
• x,y 동시 사용 원하는 경우
  - skew(X_deg, Y_deg)
  

transform: skewX(30deg);
transform: skewY(-30deg);
transform: skew(30deg, -30deg);

#2. scale()

• 크기 조절
• 1보다 큼 : 확대
• 0~1 : 축소 = 0.n 만큼 확대

transform:  scaleX(2);
transform:  scaleY(2);
transform:  scale(0.5);
transform:  scale(2, 0.5);

#3. rotate()

• 회전

• 주어진 각도만큼 회전
  -rotateX() : x축을 기준으로 회전
  -rotateY() : y축을 기준으로 회전
  -rotate() : 시계방향을 회전

• 뒷면 안보이게
  - backface-visibility : hidden;
  

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotate(55deg);
backface-visibility: hidden;

#4. translate()

• 이동
  - translateX() : X축을 기준으로 이동
  - translateY() : y축을 기준으로 이동
  - translate() : x,y 축을 기준으로 이동
  

    transform: translateX(-70px);
    /* 음수값을 줘야지만 위로 */
    transform: translateY(-30px);
    transform: translate(50px, 50px);
    transform: translate(-50px, -50px);
    

• transition 속성
  - css 요소의 속성값이 변화 할 때 일정시간 동안 부드럽게 변화가 일어나도록 설정
  - transform 속성과 함께 자주 사용

transform: scale(1.2);
transition: transform 1s;
/* 이미지가 변환할 때 1초 동안 부드럽게 변환 */
/* transition 부가 설명
        
transition: 1s;
	-간단히 모든 속성에 트랜지션을 적용하고 싶을 때 사용
	-변경 대상 속성이 많거나, 다양할 경우 적합

transition: transform 1s;
	-성능 최적화를 위해 특정 속성에만 트랜지션을 적용하고 싶을 때 사용
	-필요 없는 속성에는 트랜지션 효과가 적용되지 않도록 세밀하게 조정
    */