[html/css] transform 변형 속성으로 육면체 만들기

 transform 
변형 속성

transform은 변형속성으로 요소에 회전값이나 크기변환, 기울기, 이동 효과 등을 부여할 수 있는 속성이다.

이러한 속성을 사용하기 위해서는 속성값에 화면좌표와 변환함수가 쓰이는데, 이에 대해 먼저 알아보겠다.

 

먼저 화면좌표란 브라우저 내에 존재하는 가상의 공간을 수로 표현하는 방식을 말한다.

가상의 공간에는 x, y, z 축이 존재하는데, 이를 활용해 태그의 모양이나 위치를 바꿀 수 있다.

공간을 구분할 때는 '2차원 화면 좌표'나 '3차원 화면 좌표'방식으로 구분해 사용한다.

x축과 y축을 사용하는 변형 속성을 '2차원 화면 좌표'라고 부르고, z까지 모두 사용하는 것을 3차원 화면 좌표라고 부른다.

보통 좌상단 꼭짓점을 말하는 원점(0, 0)을 기준으로 각 축의 양수와 음수로 좌표를 판단하는데 x축의 음수를 좌측방향, x축의 양수를 우측방향,  y축의 음수를 상단, y축의 양수를 하단 방향으로 인식한다.

z축은 브라우저를 보는 유저에게 가까울수록 양수값이다. 

 

transform과 함께 쓰이는 속성값(식별자)들은 안의 함수값과 함께 쓰여진다.

/* 예시 */
transform : 속성값(x축 함수값, y축 함수값);

 

이와 같이 쓰여지는 속성값들을 '함수'라고 하며, 괄호안의 함수값들은 '변환 함수'라고 불린다.

---

 transform 
속성값 / 식별자

transform에 쓰이는 속성으로는 아래와 같이 있다.

각각의 속성을 적용하여 요소를 변형시킬 수 있으며, 변환 속성과 함께 사용하여 움직임을 가진 요소로 활용한다.

기본값으로는 '속성명 : 식별자(함수값/인자값/인수)'를 사용해 적용한다.

transform 식별자(속성값)
translate	요소를 함수값 만큼 각 축으로 이동시킬 때 사용하는 속성.
scale	요소의 중심점을 기준으로 함수 값만큼 축소/확대시키는 속성.
skew	요소의 각 모서리를 함수 값만큼 기울이는(비트는) 속성.   2차원 함수 값에서만 사용된다.
rotate	요소를 함수 값만큼 회전시키는 속성.
transform-orign	요소의 중심축을 변형하는 속성.
transform-style	입체효과 속성

---

1. Translate 속성

요소를 지정된 함수 값만큼 각 축으로 이동시키는 속성이다.
translate를 쓰고 한개의 함수값만 썼을 경우 x축만 적용된다.

 

2차원 변형함수 기본 값	translate(x축 함수값, y축 함수값)
3차원 변형함수 기본 값	translate3d(x축 함수값, y축 함수값, z축 함수값)
-	translateX(함수값)	해당 값만큼 X축으로 이동한다.
	translateY(함수값)	해당 값만큼 Y축으로 이동한다.
	translateZ(함수값)	해당 값만큼 Z축으로 이동한다.

2. Scale 속성

요소의 중심점을 기준으로 지정된 함수 값만큼 축소/확대 된다.
단위는 배율을 사용한다. ex) 1 (= 1배), 0.5 (= 0.5배)
scale 속성은 요소 자체에 부여하는 것이기 때문에 요소 내의 컨텐츠(ex. 글자)도 함께 변형되는 점을 주의 해야한다.
현실에서와는 달리 브라우저에서는 z축의 변화가 보이지 않는다.
실제 처럼 변화를 보기위해서는 transform-style: preserve-3d 와 같은 속성과 함께 사용되어야한다.

2차원 변형함수 기본 값	scale(x축 함수값, y축 함수값)
3차원 변형함수 기본 값	scale3d(x축 함수값, y축 함수값, z축 함수값)
-	scaleX(함수값)	해당 값만큼 X축으로 축소/확대 된다.
	scaleY(함수값)	해당 값만큼 Y축으로 축소/확대 된다.
	scaleZ(함수값)	해당 값만큼 Z축으로 축소/확대 된다.

3. Skew 속성

요소의 각 모서리를 지정된 함수 값만큼 기울이는(비트는) 속성이다. 
2차원 함수값에서만 사용되는 속성이며, deg 단위를 사용한다.
양수값, 음수값 모두 사용이 가능하다.

2차원 변형함수 기본 값	skew(x축 함수값, y축 함수값)
-	skewX(함수값)	해당 값만큼 X축으로 기울인다.
	skewY(함수값)	해당 값만큼 Y축으로 기울인다.

4. Rotate 속성

요소를 함수 값만큼 회전시키는 속성이다.
단위를 deg을 사용한다.

 

** rotate와 같이 각도를 사용하는 속성들은 개발자도구(f12)에서 나오는 원형 모형으로 클릭해서 적용해볼 수 있다.

2차원 변형함수 기본 값	rotate(x축 함수값, y축 함수값)
3차원 변형함수 기본 값	rotate3d(x축 함수값, y축 함수값, z축 함수값 각도)
-	rotateX(함수값)	X축으로 해당 값만큼 방향성을 갖는다.
	rotateY(함수값)	Y축으로 해당 값만큼 방향성을 갖는다.
	rotateZ(함수값)	Z축으로 해당 값만큼 방향성을 갖는다.

5. transform-origin 속성

transform이 적용된 요소의 중심축을 이동할 때 사용하는 속성이다.
기본값은 요소의 중앙이며, 각 축을 기준으로 변형할 수 있다.

기본 형	transform-origin : x축 함수값 y축 함수값 z축 함수값
속성값	x축	백분율(%), left, center, right 값 중 선택하여 사용 가능하다.
	y축	백분율(%), left, center, right 값 중 선택하여 사용 가능하다.
	z축	px이나 %와 같은 단위 값만 사용 가능하다.

---

transform 속성으로
육면체 만들기

육면체를 만들기 위해서는 여섯개의 면이 필요하다.
각각의 면이 상하좌우에 위치하는 순간 육면체가 완성된다.

transform 속성으로 육면체를 만드는 방법은 아래와 같다.

1. 육면체의 면 만들기

div로 6개의 면을 만들어주도록 하겠다.
transform 속성으로 육면체를 만들 때에는 모든 div들이 하나의 부모태그로 묶여있어야 속성 적용이 가능하기 때문에,
이곳에서는 section 태그로 묶어 주도록 하겠다.

    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>

2. 넓이 값 주기

부모태그인 section태그와 자식태그인 div태그에게 모두 넓이값을 주어야한다.
우리는 육면체를 만들것이기 때문에 부모태그와 자식태그 모두 넓이값이 같아도 상관없다.
자식태그인 div에게는 position:absolute로 위치를 조정할 것이기 때문에 부모에게도 position:relative를 주었다.
평면에서 3d로 만들어주는 속성인 transform-style:preserve-3d는 부모태그에게 적용한다.

section {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 150px;
  transform-style: preserve-3d;
}
div {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.3;
}

3. 각 면의 위치를 조정하여 육면체 만들기

각 면의 위치를 ratate 속성과 translate3d 속성을 활용해 옆면과 위,아랫면으로 배치시킨다.
면의 위치를 알기 위해서 아래 각 면의 배경색상도 부여하였다.

/* 옆면 */
section div:nth-child(1) {
  transform: rotateY(0deg) translate3d(0px, 0px, 150px);
  background-color: pink;
}
section div:nth-child(2) {
  transform: rotateY(90deg) translate3d(0px, 0px, 150px);
  background-color: skyblue;
}
section div:nth-child(3) {
  transform: rotateY(180deg) translate3d(0px, 0px, 150px);
  background-color: rgb(135, 235, 135);
}
section div:nth-child(4) {
  transform: rotateY(270deg) translate3d(0px, 0px, 150px);
  background-color: rgb(228, 235, 135);
}
/* 윗면 아랫면 */
section div:nth-child(5) {
  transform: rotateX(90deg) translate3d(0px, 0px, 150px);
  background-color: rgb(150, 135, 235);
}
section div:nth-child(6) {
  transform: rotateX(270deg) translate3d(0px, 0px, 150px);
  background-color: rgb(235, 188, 135);
}

이렇게 각 면을 변형속성을 이용해 위치에 배치했지만 결과 값은 아래와 같이 하나의 면만 보이는 상태이다.
입체적인 모습을 확인하기 위해서는 변환 속성과 함께 사용되어야한다.

 

4. 변환속성을 사용해 육면체의 모습 확인하기

애니메이션 속성을 부모태그에 추가하여 육면체의 모습을 확인하도록 하겠다.

section{
animation: spin 3s linear 0s infinite;
}

@keyframes spin {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotatez(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotatez(360deg);
  }
}