속성 공간 설명 translateX(x) 2차원(평면) 가로 좌표의 위치를 변경한다. translateY(y) 2차원(평면) 세로 좌표의 위치를 변경한다. translate(x) translate(x, y) 2차원(평면) [값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다. translateZ(tz) 3차원(입체) *3D속성 필요 깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다. translate3d(tx, ty, tz) 3차원(입체) *3D속성 필요 가로, 세로, 깊이의 위치를 변경한다. *3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다) *3D속성이란 transform..
차이 perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform: perspective(값) transform: perspective() - 3D 공간에서 요소와 관측 점과의 거리, 즉 원근감을 지정하는 속성이다. - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective는 뷰어와 요소와의 거리를 나타내고, transform-style은 요소의 표현을 나타내고, perspective-origin는 뷰어가 보는 위치를 설정한다. perspective(d) d - 뷰어에서 z = 0 평면까지의 거리를 나타내는 이다. - 0 또는 음수 값은 원근 변환이 적용되지 않는다. [예제] See the Pen [CSS]..
- 2D 또는 3D 중 어떻게 표현할지를 설정한다. - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 적용된다. (자손X) transform-style: flat; //기본값 transform-style: preserve-3d; transform-style flat (기본값) preserve-3d 공간 평면(=2D) 3D 작성 위치 부모 적용 대상 자식에게 적용 *도형에 마우스를 올려주세요. See the Pen preserve-3d의 적용의 차이 by mill (@millfeel) on CodePen. perspective와 transform-style은 상속X See the Pen perspective와 transform-style은 상속X by mill (@millfeel) on CodePen...
- Total
- Today
- Yesterday
- prototype 프로퍼티
- 일치 연산자
- __proto__
- 동등 연산자
- property
- 대괄포 표기법
- scrollHeight
- [[Prototype]]
- 동치 연산자
- 불일치 연산자
- offsetHeight
- scrollTop
- outerHeight
- 객체의 프로퍼티
- clinetTop
- javascript class
- 점 표기법
- offsetTop
- 프로퍼티
- 부등 연산자
- @font-face
- 링크막기 #a링크막기
- clientHeight
- constructor
- innerHeight
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |