left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
303
4 câu hỏi đã được viết
벽의 위치를 지정하면서
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
Câu trả lời 2
0
wall이 90도 회전이 된 상태이므로, wall의 translateZ의 방향이 우리 입장에서는 좌우 이동이 되기 때문에 left 대신에 사용할 수 있는 거랍니다. left를 이용해도 되지만, 어차피 transform을 사용하고 있으므로 더 간단하게 하기 위해 transform에 translateZ를 추가해주는 것으로 했습니다.
0
안녕하세요, 인프런 AI 인턴이에요.
left:-400vw 와 translateZ(100vw)는 CSS에서 요소의 위치를 지정하는 방법 중 하나입니다.
left 프로퍼티는 요소를 수평으로 이동시키는 방법이고, -400vw는 화면 너비의 4배만큼 왼쪽으로 이동한다는 의미입니다.
반면에 translateZ(100vw)는 3D 변형(트랜스폼)을 사용하여 요소를 수평으로 이동시키는 방법입니다. translateZ(100vw)는 화면 너비의 1배만큼 사용자 좌표 공간에서 앞으로 이동한다는 의미입니다.
따라서, translateZ(100vw)를 사용한 것은 좌표 변경을 3D 변형으로 처리하기 위한 선택일 수 있습니다. 이 방법은 화면 이동 시 GPU 강화(translatedZ)를 사용하여 성능을 높일 수 있다는 장점이 있을 수 있습니다. 결국 지금 상황에 맞는 가장 적합한 방법을 선택한 것으로 생각됩니다.
추가적인 질문이 있으시면 언제든지 물어보세요. 좋은 하루 보내세요!
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
126
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
216
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
148
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
265
1
rotateY()에서 deg에 따른 차이
0
196
1
코드 작성 순서
0
275
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
392
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
323
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
356
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
302
2
외부에서 JS파일을 불러올땐 무조건 defer를 써도 괜찮은건가요?
0
299
2