본문 바로가기
css

[CSS] transform 변형속성

멩멩멩 2024. 7. 1. 15:15

 ★ transform : 변형속성 
브라우저 화면의 x,y,z 축을 이용해 태그의 모양을 바꿔주는 속성.


x축과 y축을 사용하는 변형 속성을 2차원 화면 좌표라고 부르고, 여기에 z축이 추가되면 3차원 화면 좌표라고 부른다. 
z축은 브라우저를 보는 유저에게 가까울수록 양수값이다.  

*각각 쓸 때는 x y z 를 대문자로 써야한다. 

 

* 한꺼번에 쓸 때는 띄어쓰기로 구분한다.  transform: rotateY(0deg) translate3d(0px, 0px, 150px);

2차원 변형함수 transform-translate(x,y) 원래 자기가 있던 자리가 기준으로, 해당 축으로 특정 크기만큼 이동함.  
transform: translate(100px, 20px);
transform-scale(x,y) 박스의 중심을 기준으로 특정 크기만큼 축소/ 확대   transform: scale(1.2, 1.5);
transform-skew (x,y) 특정 각도만큼 기울임. 각도 deg 단위 사용 transform: skew(45deg, 15deg);
transform-rotate(z) 특정 각도만큼 회전시킴. z축 하나만 사용한다.   
3차원 변형 함수 transform-translate3d(x,y,z) z축은 원근감이 없어서 눈에 보이는 변화는 없다. 
transform-scale3d(x,y,z)  
transform-rotate3d(x,y,z,각도deg) transform: rotate3d(2, 3, 4, 220deg);  
중심축 변형 속성  transform-origin : x축 y축 z축; - x축 : 백분율(%), left, center, right 중에서 지정할 수 있다. 
- y축 : 백분율(%), top, center, bottom 중에서 지정할 수 있다. 
- z축 : z축은 길이값만 사용 가능 (px, %)


    
< 2차원 변형 함수 >

프로그래밍 언어에서 식별자(속성값)뒤에 괄호가 있을 때 해당 식별자를 '함수'라고 하며, rotate(60deg)같은 경우 괄호 부분을 '변환함수'라고 부른다. 

 [ 종류 (속성값) ]

 

 1. translate(x, y)

: 특정 크기만큼 이동함. 해당 축으로 이동 시킬 때 사용한다. (포지션 릴레이티브랑 비슷하다.)

원래 있던 자기 자리가 기준점. (애니메이션 효과를 넣을 때 같이 사용한다. )

 

- translateX(값): 특정 크기만큼 x축으로 이동한다. ex) translateX(-200px) 대문자로 써야한다.

% px rem 단위 다 사용가능. 

- translateY(값): 특정 크기만큼 y축으로 이동한다. ex) translateY(200px)

 transform: translate(100px, 20px);

 


 2. scale(x,y) 

: 박스의 중심을 기준으로 특정 크기만큼 축소/확대됨. 단위는 배율을 사용함. 1: 1배수 = 100%  /  2: 2배 = 200% / 0.5: 0.5배=50% 

 - scaleX(값): 특정 크기만큼 x축으로 축소/확대됨. 
- scaleY(값): 특정 크기만큼 y축으로 축소/확대됨. 

 transform: scale(1, 1); /*기본값*/
 transform: scale(1.2, 1.5);

 

scale을 쓰게 되면 안쪽 컨텐츠에도 영향을 미치게 된다.

글자나 이미지도 같이 찌그러들 수도 있어서 배율을 잘써줘야한다. 

 

 3. skew(x,y)

: 특정 각도만큼 기울인다. 각도 deg(덱)이라는 단위 사용

 

- skewX(값): x축으로만 특정 각도만큼 기울인다.
- skewY(값): y축으로만 특정 각도만큼 기울인다. 

transform: skew(45deg, 15deg);
transform: skewX(-45deg);

음수는 반시계 방향.

개발자도구에서 회전축으로 만들면 된다. 

 



 4. rotate(z)

: 특정 각도만큼 회전시킴. z축 하나만 사용한다. 각도 deg(덱)이라는 단위 사용

 
 

transform: rotate(30deg);

 

< 3차원 변형 함수 >

: x, y, z를 이용해 입체 효과를 만들 수 있다. 
하지만 해당 속성을 적용한다고 해서 바로 입체적으로 보이는 것은 아니며,

입체 효과 속성을 추가해야만 해당 태그를 입체적으로 볼 수 있다. 

 [종류]

 

1. translate3d(x,y,z)

: 특정 크기만큼 이동한다. 2차원처럼 각각 사용할 수 있다.  xyz 각각 쓸 수 있다. 
 - translate3dX
 - translate3dY
 - translate3dZ : z축으로 특정 크기만큼 이동함. z축으로 가까워지더라도 커지진않는다. 원근감이 없다. 눈으로 보이는 변 화는 없다. 

 transform: translate3d(100px, 30px, 50px);

transform: translateZ(1000px);

z축은 원근감이 없어서 눈에 보이는 효과는 없다. 



2. scale3d(x,y,z)

: 특정 크기만큼 축소/확대. 원근감이 없다. 눈으로 보이는 변화는 없다.  xyz 각각 쓸 수 있다. 
    -scale3dX
    -scale3dY
    -scale3dZ

transform: scale3d(2, 3, 5);

z축은 원근감이 없어서 눈에 보이는 효과는 없다. 



3. rotate3d(x,y,z,각도deg)

: 특정 각도만큼 회전함. 
-rotate3dX : x축만큼의 방향성을 갖는다.

-rotate3dY : y축만큼의 방향성을 갖는다.
-rotate3dZ  : z축만큼의 방향성을 갖는다.

transform: rotate3d(2, 3, 4, 220deg);

2차원보다 입체적으로 돌아가게 되는 것을 볼 수 있다. 

deg 앞에 각도 숫자값 써줘야한다. 



 

< 중심축 변형 속성 >

transform-origin

: 중심축 변형 속성

  
transform이 적용된 박스의 중심축을 이동시킬때 사용하는 속성.
기본값은 박스의 중앙이며, 값을 3개로 나눠서 사용할 수 있음.

 [기본형]
transform-origin : x축 y축 z축;

반드시 모든 값을 다 써야하는 건 아니다. 한가지 값만 쓰면 x,y 동일하게 적용된다. 

[속성값]
 - x축 : 백분율(%), left, center, right 중에서 지정할 수 있다. 
- y축 : 백분율(%), top, center, bottom 중에서 지정할 수 있다. 
- z축 : z축은 길이값만 사용 가능 (px, %)

  transform: scale(0.5);
  transform-origin: left top;

중심축을 x축은 left로, y축은 top으로 이동시킨 상태. 

 transform-origin: right center;

중심축을 x축은 right로 y축은 center로 이동시킨 상태. 

 

실습 ) 정육면체 만들기

더보기 
 <body>
    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </body>

css

더보기 
section {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 150px;
  animation: rint 3s linear 0s infinite;
  transform-style: preserve-3d;
}
div {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3;
}
/* 옆면- 여러 개 한꺼번에 쓸때는 띄어쓰기로 구분*/
div:nth-child(1) {
  transform: rotateY(0deg) translate3d(0px, 0px, 150px);
  background-color: palevioletred;
}
div:nth-child(2) {
  transform: rotateY(90deg) translate3d(0px, 0px, 150px);
  background-color: rgb(147, 122, 255);
}
div:nth-child(3) {
  transform: rotateY(180deg) translate3d(0px, 0px, 150px);
  background-color: rgb(7, 100, 53);
}
div:nth-child(4) {
  transform: rotateY(270deg) translate3d(0px, 0px, 150px);
  background-color: rgb(42, 56, 255);
}
/* 위 아랫면 */
div:nth-child(5) {
  transform: rotateX(90deg) translate3d(0px, 0px, 150px);
  background-color: rgb(255, 240, 108);
}
div:nth-child(6) {
  transform: rotateX(270deg) translate3d(0px, 0px, 150px);
  background-color: rgb(49, 44, 0);
}

@keyframes rint {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
transform-style: preserve-3d;

이게 있어야 3d로 인식한다. 

'css' 카테고리의 다른 글

[CSS] animation 애니메이션 속성  (0) 2024.07.02
[CSS] transition 변환 속성, 움직임을 부드럽게 처리하는 속성  (0) 2024.07.01
[CSS] flex 유연한 박스 만들기 / flex-basis/ flex-grow / flex-shrink / flex  (0) 2024.06.28
[CSS] table 표에 사용하는 css 속성  (0) 2024.06.19
[CSS] position 위치 속성  (0) 2024.06.17

'css' Related Articles

티스토리툴바