inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

인터랙티브 웹 개발 제대로 시작하기

전진! 3D 스크롤 5

rotateY(90deg) 후 방향은.. ?

228

후르정

작성한 질문수 1

0

안녕하세요. 

07:50에  .wall-right를 저는 translateZ(-100vw) 해야한다고 생각했거든요.. 

왜냐하면, rotateY(90deg) 하면 시계방향으로 돌아서 div의 앞면이 우리 시각에서 왼쪽을 향해있다고 생각해서요.

그래서 뒤로 100vw만큼 옮기려면 translateZ(-100vw) 라고 생각했는데 강의에서 양수값으로 나와서 궁금합니다.

제가 잘못 알고 있는게 무엇일까요 ?

HTML/CSS 인터랙티브-웹 javascript

답변 1

0

1분코딩

아이고 답변이 늦었습니다^^;

100vw만큼 더 가는게 아니라 덜 가는 개념이니까, 앞으로 나온다고 생각하시면 될 것 같습니다.
left 값으로만 단순하게 생각해보면,
-500vw만큼 간 상태에서 100vw 만큼 덜 움직이는 것이니까요.
사실 이런 코딩을 하다보면 저도 방향이 많이 헷갈립니다 ㅎㅎ
해보고나서 예상과 다를 경우에,
절대거리와 절대각도만 틀리지 않았다면 부호를 반대로 바꾸면 대부분 해결이 되고요.
잘못 알고 계신 것은 없고, 그냥 단순히 움직임을 머리로 생각하다보니 헷갈릴 수 있는 부분이라고 생각됩니다^^
공부 화이팅입니다!

왼쪽/오른쪽 동작시 딜레이 문제

0

93

1

변수 범위 관련 질문

0

106

1

perspective 문의

0

102

1

생성자 함수를 클래스 함수로 변경 하고 this 오류 관련

0

150

1

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

0

127

1

animation이벤트 질문이요!

0

72

1

resize handler에서 질문이 있습니다.

0

111

1

카드 뒤집힐 때 F가 보인 이유

0

149

1

3d 뒤집기 추가효과

0

218

1

전진! 3D 스크롤 21 강의 질문

1

171

1

eventlistener 질문

0

149

1

zMove 를 1000으로 설정하는 이유에 대하여.

0

168

1

[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

1

191

1

동적으로 html 생성 후 이벤트 위임 질문 있습니다.

0

266

1

rotateY()에서 deg에 따른 차이

0

197

1

코드 작성 순서

0

276

1

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

1

394

1

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

0

265

2

섹션5 자바스크립트 이벤트 다루기 질문

1

243

1

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

0

423

2

css 는 직접 작성을 해야하는걸까용?

0

326

1

translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

0

361

2

house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.

0

305

2

left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.

0

306

2