2013-03-31 3 views
0

나는 많은 항목을 드래그 할 수있는 div가 있습니다. 여러 항목을 선택하고 그룹화 한 다음 그룹으로 모두 함께 회전 할 수 있습니다. 그것은 모두 잘 작동하지만, 개별 항목의 회전이 이전에 적용된 경우에만 가능합니다.개별 항목의 중심을 중심으로 이전 로컬 회전 후 그룹의 중심을 중심으로 css3 회전 적용

개별 항목에 이전에 로컬 회전이 적용된 경우 문제가 발생합니다. 이 경우 그룹 회전은 항목의 위치에서 편차가 있으며 제대로 작동하지 않습니다.

각 항목의 로컬 개별 회전은 개별 항목의 가운데 50 % 50 %로 설정된 변환 원점을 사용하여 수행되는 것이 문제라고 생각합니다. 그룹을 포함하는 그룹의 중심을 중심으로 각 항목을 회전하는 것은 그룹의 중심으로 분명히 설정되는 새로운 변환 원점을 갖습니다.

첫째, 항목 1의 로컬 회전이 처음 45도였습니다. 그런 다음 다른 항목들과 함께 그룹화되었고 그룹 회전은 30 도가 그룹에 적용되었습니다. item1은 전체적으로 45도 회전해야하며 그룹 중심과 관련하여 30도 회전해야합니다. 문제는 어떻게 구현할 것인가입니다.

css3에서의 회전은 하나의 변환 원점 만 허용합니다. 행렬과 여러 가지 방법을 시도했지만 항목에 이전 회전이 있으면 결과가 여전히 잘 나오지 않습니다. 항목이 이전에 회전 수가 0이면 모든 것이 효과적입니다. 그런 다음 그룹이 중심을 중심으로 크게 회전합니다. 그러나 개별 항목에 로컬 순환이있는 경우 전체 그룹을 순환시킬 때 문제가 발생합니다.

다른 변형 원점을 사용하는 동일한 항목에 두 개의 회전 (또는 다른 두 개의 변형)을 결합 할 수있는 방법은 무엇입니까? (예 : 자체 중심을 중심으로 하나, 큰 그룹 중심을 중심으로 다음과 같이 말하십시오. 해당 항목 포함).

답변

2

translate() before 및 after after를 사용하여 여러 변형 원본을 에뮬레이트 할 수 있습니다. 예를 들면 다음과 같습니다. http://lea.verou.me/css-4d/#circle-demo-3 (로드하는 데 다소 시간이 걸릴 수 있습니다)

모든 변환 기능이 전체 좌표계를 변경하고 모든 것이 더 쉽게 이해됩니다.

+0

대단히 감사합니다. 예를 들어 환상적입니다. 번역 할 금액을 찾는 방법에 대한 조언이 있습니까? 그게 내 주요 문제는, 나는 x 회전하지만 지금까지 행운을 할 때 지점의 번역을 찾기 위해 삼각법 방정식을 사용하려고 노력하고 있어요 :) ive 찾고있다 http://stackoverflow.com/questions/5180685/get- 좌표 후 회전 및 http://stackoverflow.com/questions/9043391/html5-canvas-calculating-axy-point-when-rotated –

+0

이 특정 예에서 양은 스마일리가 움직이는 원의 반경입니다 . 첫 번째 회전은 스마일의 좌표계를 회전시키고, 변환은 새로운 후 회전 'x 축'을 따라 이동시키고 두 번째 회전은 회전 된 다음 다시 움직이는 좌표계를 회전시킵니다. – Ana

관련 문제