HTML3 차원 변환, 회전, 뒤집기, 띄우기 및 일반적으로 왜곡 된 HTML3 요소가있는 CSS3를 기반으로하는 매우 복잡한 사이트가 있습니다.CSS3-3d로 변환 된 요소의 화면 위치를 얻는 방법은 무엇입니까?
나는이 요소 중 하나의 화면상의 위치를 알아 내려고하고 있으며 그렇게 할 방법이 없다. 나는 누군가가 독창적 인 생각을 갖고 있는지 궁금해하고 있었다.
또 다른 사람이 -webkit-perspective 뒤에 수학을 설명 할 수 있다면 그 모델을 어떻게 모델링해야할지 모르겠다는 점에서 그 위치를 파악할 수 있습니다.
getBoundingClientRect()을 사용해 보셨습니까?
transform 속성으로 변환 된 요소의 크기를 계산하는 데 성공적으로 사용해 왔습니다.
문제는 CSS3 변환이 실제로 요소의 위치를 변경하지 않는다는 것입니다. 물론 브라우저는 렌더링하기 때문에 위치를 조정한다는 것을 "알고"있지만이 정보는 다시 DOM/API에 제공되지 않습니다.
내가 생각할 수있는 유일한 점은 변환이 단순한 "matrix transformations"이므로 직접 변환을 기반으로 위치를 계산하는 것입니다.
불행히도 대수학 수업은 너무 오래 전부터 나에게 더 이상 할 수 없다는 것을 말하고 있습니다. 단지 가능하다는 것입니다.
getBoundingClientRect을 사용하는 것은 좋은 생각이지만, 네 개의 겹침, 밑면, 밑면, 꼭지점의 정확한 좌표가 아닌 모양을 포함하는 직사각형의 좌표 만 제공합니다.
변환되지 않은 각 좌표를 가져 와서 자바 스크립트를 통해 변환을 적용하면됩니다.
새 답변을 추가하는 대신 허용 된 답변에 댓글로 게시하시기 바랍니다. –
네, 문제가 무엇인지 압니다. 그리고 저는 직접 계산하게되어 기쁩니다.하지만 제가 말씀 드렸듯이,'-webkit-perspective'의 배경에있는 수학이 실제로 무엇인지는 알지 못합니다. 초점 거리 조절기처럼 작동하지만, '-webkit-perspective : 500'은 실제로 무엇을 의미합니까?!? –
three.js의 CSS3DRenderer를 확인하십시오. 내가 기억하는 것으로부터, 그들은 카메라의 시야 (fov)를 취하고 그것을 가로 또는 세로로 곱해서 원근법을 얻습니다. 그래서 그것들과 관련이 있습니다. – Funkodebat