티스토리 뷰

CSS Animation

[CSS Animation] translate

translate

translate


translate

이동(translate)

속성값 예시 설명
translate(x,y) transform: translate(10px, 20px); X좌표, Y좌표 이동을 나태냅니다.
translate3d(x,y,z) transform: translate3d(10px, 20px, 30px); X좌표, Y좌표, Z좌표 이동을 나태냅니다.
translateX(x) transform: translateX(10px); X좌표 이동을 나태냅니다.
translateY(y) transform: translateY(10px); Y좌표 이동을 나태냅니다.
translateZ(z) transform: translateZ(10px); Z좌표 이동을 나태냅니다.

Sample1

translate의 값을 표현한 예제입니다.

결과
translate01
translate02
translate03
translate04
translate05
CSS
.translate01 {transform: translate(10px, 10px);}
.translate02 {transform: translate(20px, 20px);}
.translate03 {transform: translate(30px, 30px);}
.translate04 {transform: translate(40px, 40px);}
.translate05 {transform: translate(50px, 50px);}

Sample2

translateX의 값을 표현한 예제입니다.

결과
translate06
translate07
translate08
translate09
translate10
CSS
.translate06 {transform: translateX(10px);}
.translate07 {transform: translateX(20px);}
.translate08 {transform: translateX(30px);}
.translate09 {transform: translateX(40px);}
.translate10 {transform: translateX(50px);}

Sample3

translateY의 값을 표현한 예제입니다.

결과
translate11
translate12
translate13
translate14
translate15
CSS
.translate11 {transform: translateY(10px);}
.translate12 {transform: translateY(20px);}
.translate13 {transform: translateY(30px);}
.translate14 {transform: translateY(40px);}
.translate15 {transform: translateY(50px);}

Sample4

translateZ의 값을 표현한 예제입니다.

결과
translate16
translate17
translate18
translate19
translate20
CSS
.translate16 {transform: translateZ(10px); opacity: .6;}
.translate17 {transform: translateZ(20px); opacity: .6;}
.translate18 {transform: translateZ(30px); opacity: .6;}
.translate19 {transform: translateZ(40px); opacity: .6;}
.translate20 {transform: translateZ(50px); opacity: .6;}

Sample5

translateZ의 -값을 표현한 예제입니다.

결과
translate21
translate22
translate23
translate24
translate25
CSS
.translate21 {transform: translateZ(-10px); opacity: .6;}
.translate22 {transform: translateZ(-30px); opacity: .6;}
.translate23 {transform: translateZ(-50px); opacity: .6;}
.translate24 {transform: translateZ(-70px); opacity: .6;}
.translate25 {transform: translateZ(-90px); opacity: .6;}

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼