CSS 변환 행렬

Question

나는 시차 스크롤 효과를위한 3D 변환 놀아 봤는데 비행기 예측에 비행기를 수행하는 방법을 이해하려고 노력 중이 야. 저는 주위를 둘러 보았습니다. 그러나 수학에 관련된 행렬은 명확한 예제가 없으면 이해하기가 약간 어렵습니다.

여러 패널 레이아웃 주어 I는 원래 비 - 변형의 관점을 유지하면서 새로운 임의의 평면에 각각 패널을 이동 변환 행렬을 얻고 자하는 것이다.

여기서,이 문제를 설명하기 위해 스케일링되고 투영 평면을 달성하기 위해 변환에 따라 3 명 가지의 div의 Z 변환을 행하는 plunker이다. 스케일과 X, Y 변환을 사용하여 변형이없는 것처럼 특정한 스크롤 포인트에서 정렬되도록 표시됩니다.

https://plnkr.co/edit/UddWeLAWTQgkcpYMRP9q

내가 시행 착오가 translateZ 장소에서 그것을 끌어 후 다시 DIV를 이동하는 수동 scale, translateX 및 translateY을 수행하여이 예제를 달성

transform: translateZ(60px) scale(0.4) translateX(-270px) translateY(258px); 

. 그러나 내 div가 필요한 값을 변경하는 고정 크기가 아니기 때문에 변환 행렬을 계산하는 더 좋은 방법을 이해하고 싶습니다.

Answer 1

여기에 다시 내 자신의 질문에 대답합니다. 이 사이트가 도움이되는 솔루션을 찾는 데 큰 도움이 되었기 때문에 내 질문에 전혀 도움이되지 않습니다. 평판이 좋은가요? 나는 이해하지 못한다.

어쨌든문서의 정보를 사용하여 결국 전체 변환 행렬을 사용하는 대신 삼각형 수학과 관련된 내 솔루션을 찾을 수있었습니다.

https://plnkr.co/edit/W5GTbViN0O8gnkCmxV5W?p=preview

function translateLayer(obj, y, newZ) 
{ 
    var containerWidth = jQuery('.parallax').width(); 
    var x = (obj.position().left + parseInt(obj.css('marginLeft'), 10)) - (containerWidth/2); 
    var z = 100; 

    var n = z - newZ; 
    var scale = 1 - (newZ/z); 
    var newX = (n/z) * x; 
    var newY = (n/z) * y; 
    var transX = 0 - (x - newX); 
    var transY = (y - newY); 

    obj.css({'transform-origin':'0% 0%', 'transform':'translate3d('+transX+'px, '+transY+'px, '+newZ+'px) scale('+scale+')'}); 
} 

obj 번역 될 jQuery 오브젝트이다

찾는 작업에서 용액을 나타내는 plunker이다.

y가 왼쪽 상단에 선택한 중심 원점에서 수직 거리, 양의 값은 축과 음의 값 아래로 이동. 브라우저 좌표계는 왼쪽 상단에 원점을 사용하므로이 값을 얻으려면 일부 계산이 필요합니다. 원점이 어디에서 선택해야 할지를 결정해야하지만,이 솔루션은 수평 중심에 있다고 가정합니다. 스크롤이 선택한 원점에 도달하면 레이어가 원래 레이아웃 위치로 동기화됩니다. 아래 예에서 나는 3 블록 레이아웃의 가장 중심에 원점을 선택했습니다.

newZ 개체에 바람직한 새로운 깊이 값이다. 양수 값은 뷰어에 더 가까이 이동하고 음수 값은 멀리 이동합니다. perspective: 100px

:이 함수에서 I는 부모 요소의 CSS의 이용 관점에서 정의되어야 100 최대 Z 값을 하드 - 코딩 한