[CSS] transform 요소를 변형하는 값

transform: scale() 크기

크기를 조정하며 값을 입력하면 배수로 적용되며 단위값이 없음.

다른 요소나 레이아웃에 영향을 끼치지 않음.

transform: scale(2);
/* 2배로 커짐 */

transform: scaleX()

x축만 scale이 적용됨.

transform: scaleY()

y축만 적용되며 이미지를 줄일 때는 1이하의 소수점의 값을 입력하면 됨.

 

transform: scale(x축 값, y축 값)

x축과 y축 값을 순서에 따라 작성 가능.

 

---

transform: skew() 기울기

기울기를 조정하는 값.

transform: skew()

각도의 단위값인 deg로 작성하며 한 자리수로 작성 시 x축에만 적용.

transform: skewX(), transform: skewY()

x,y축에만 적용됨.

transform: skew(x축, y축)

x축 y축의 순서로 작성하며 ,로 구분

---

transform: translate() 이동

요소를 이동시키는 값. 적용된 요소 자신을 기준으로 이동하며 다른 요소나 레이아웃에 영향을 주지 않음.

transform: translate()

px, % 등의 단위값으로 작성하며 한 자리수 작성 시 x축에만 적용.

transform: translateX(), transform: translateY()

x,y축에만 적용됨.

transform: translate(x축, y축)

x축 y축의 순서로 작성하며 ,로 구분

---

transform: rotate() 회전

요소를 회전시키는 값. 시계 방향이 기본값이며 -값을 주면 반시계 방향.

transform: rotate()

각도의 단위값 deg로 작성하며, 한 자리수로 작성 시 z축을 기준으로 적용.

transform:rotateX(), transform: rotateY(), transform: rotateZ()

x,y,z축에 각각 적용됨.

---

transform-origin: 값; transform의 적용 기준 설정

transform 변형의 기준점을 설정하는 값. x축 y축 순서로 작용하며 띄어쓰기로 구분

transform-origin: 50%;

• 기본값 == 50% 50% == center == center center
• px값 == 값만큼 기준축 이동
• 0 == 0 0 == left top
• 100% == 100% 100% == right bottom

---

transform 중첩

transform의 종류에 따라 상하로 나열해서 작성하면 css 우선순위에 따라 위에 작성된 transform 값들이 무효되기 때문에여러가지의 값을 한 번에 적용시키려면

transform: rotate(); skew(); scale(); 등 한 줄에 나열해서 작성해야 함. 띄어쓰기로 구분

 

순차적으로 실행되기 때문에 원하는 애니메이션 효과를 위해서는 순서에 유의해서 작성.

    .wrapper:hover .box {
	  transform: rotate(360deg)
      /* 무효 */
      transform: scale(1)
      /* 무효 */
      transform: skew(10deg)
      /* 유효 */
      
      /* 종류만 달라졌을 뿐 아래에 transform이 작성되면 위에 값들은 초기화가 된다. */
    
      transform: rotate(360deg) scale(1) skew(10deg);
      /* 여러개의 값을 적용 시킬 때 띄어쓰기로 구분해서 한 줄에 작성. */
    }

---

transform: perspective 원근감

transform: perspective - 요소의 원근감을 조절하는 값.

 

x, y축은 평면에서의 움직임이라서 perspective에도 별 차이가 없지만 수직으로 올라오는 z축은 차이가 있음.

 

 

---

perspective 원근감

transform: perspective는 원근감을 줄 요소에 직접 적용.

perspective는 원근감을 줄 요소의 부모에 적용. 관찰자 시점.

 

perspective-origin 원근감 시선의 기준 방향.

transform:perspective VS perspective

transform: perspective

해당 요소에 직접 적용시키며 각 각의 요소에 원근감 값이 적용된다.

 

perspective

부모 요소에 적용 시키며 전체의 덩어리를 부모 요소의 관찰자 시점에서 보는 모양이 됨.

---

transform: style 3D 속성 상속

transform: style - 3D 변환 요소의 자식도 3D 값을 사용할 지 결정

• transform-style: flat; 기본값

• transform-style: preserve-3d; 3D값을 사용

---

backface-visibility 요소의 뒷면 제어

요소가 회전했을 때 뒷면의 출력 여부를 제어하는 값.

 

backface-visibility: hidden; 뒷면 숨김backface-visibility: visible; 기본값. 뒷면 보임.