[css] CSS - translate 속성 - 2D/3D 상 요소 위치 좌표 변경 지정 (= translate속성 = 트랜슬레이트속성)

목차

1. translate 예제 - 2D상 요소 위치 좌표 변경
2. translate 정의
3. translate 구문
4. translate 예제 - 3D상 요소 위치 좌표 변경

translate 예제 - 2D상 요소 위치 좌표 변경

(예) 오른쪽으로 100px, 아래로 50px 이동

 

<style>

div {

  height: 50px;

  width: 50px;

  background-color: red;  

  translate: 100px 50px;

</style>

<div></div>

 

결과보기

translate 정의

 

2D/3D 상 요소의 위치 좌표를 변경.

 

---

 

1.

• 속성값을 따옴표로 감싸면 안 됨.
• z축 정의하려면, 부모요소에 perspective 속성 있어야 함.
• translate() 함수 갖는 transform 속성 사용해서도 위치 변경 가능.

 

2.

• 기본값: none
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS 구문: object.style.translate="10px 20px"

 

3.

주요 최신 브라우저 모두 지원.

 

translate 구문

 

selector {translate: x-axis y-axis z-axis|initial|inherit;}

 

---

[속성값]

x-axis

x축(=가로축) 좌표. (※ 가능값: length, %)

 

y-axis

y축 (=세로축) 좌표. (※ 가능값: length, %)

 

z-axis

z축 (= 3D상 높이) 좌표. (※ 가능값: length)

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

translate 예제 - 3D상 요소 위치 좌표 변경

(예) 같은 크기이나, z축 값 부여해 더 크게 보이게 하기.

 

<style>

#box {

  width: 200px;

  height: 200px;

  padding: 10px;

  margin: auto;

  border: 1px solid black;

  perspective: 200px;

}

#red {

  height: 100px;

  width: 100px;

  border: 1px solid red;

  background-color: red;

  translate: 50px 50px 50px;

}

#gray {

  position: absolute;

  width: 100px;

  height: 100px;

  border: 1px dashed gray;

  background-color: gray;

  opacity: 0.5;

}

</style>

<div id="box">

  <div id="gray">gray</div>

  <div id="red">red</div>

</div>

 

결과보기