CSS로 변환 된 오브젝트 위치 고정

Question

단어로 설명하기가 어려웠으므로 그래픽으로 설명하려고했습니다.

여기에 스타일이있는 div가 있습니다. 이제

내가 여기에 400 픽셀과의 폭을 변경하는 경우 ...

가 뭔가 "TOP-LEFT"코너를 형질 전환 (회전) 개체 발생하고의 때문에 그것의, 아래로 움직인다.

이제 "TOP-LEFT"위치를 고정시키고 싶습니다. 하지만 정확한 상관 관계를 찾아 낼 수는 없었습니다. 회전 각을 사용하여 삼각법을 사용해야한다고 생각합니다.

또한 'scale'및 'transform-origin'과 관련이 있으며 쉽게 처리 할 수 ​​있지만 다른 변형 매개 변수를 사용하고 싶지는 않습니다. Especialy 'transform-origin'은 브라우저 지원 부족 때문입니다.

JavaScript를 모서리를 수정하는 데 사용할 상호 관계를 도와 줄 수있는 사람이 있습니까? 어쩌면 getBoundingClientRect()을이 용도로 사용할 수 있습니다. 여기

는 FIDDLE

당신을 감사합니다. 당신이 사용하지 않는 경우

Answer 1

transform-origin이 작업을 수행 할 수 있습니다

$(function() { 
    var isScaled = false; 
    $('#box').on('click', function() { 
     if (isScaled) { 
      isScaled = false; 
      $(this).width('200').css({'top':'50px','left':'50px'}) 
     } else { 
      isScaled = true; 
      $(this).width('400').css({'top':'24px','left':'46px'}); 
     } 
    }) 
}); 

Answer 2

FIDDLE이 바이올린이 문제를 보여주고있다 : http://jsfiddle.net/y343Z/19/ 는 "그림자"크기를 변경하는 경우, XY 축과 함께 움직입니다.

여기에 하나의 가능성이 있습니다. http://jsfiddle.net/y343Z/18/

그냥 tranformed 요소의 내부 그림자를 배치 :

#box { 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:50px; 
    left:50px; 
    -moz-transform:rotate(345deg); 
    -webkit-transform:rotate(345deg); 
    -o-transform:rotate(345deg); 
    -ms-transform:rotate(345deg); 
} 
#box-shadow { 
    width: inherit; 
    height: inherit; 
    background-color:silver; 
    position:absolute; 
    opacity: 0.3; 
} 
#box { 
    background-color:orange; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

그냥 명확히하기 : :이 때문에 실제 그림자를 위해 바람직하지 않은 것을 알고이 CSS와

<div id="box"> 
<div id="box-shadow" style="width:400px;"></div> 
</div> 

을 변형 된 상자의 외부에 있어야합니다. 하지만 당신의 그림자 객체는 스크린 샷과 같은 핸들을 포함하는 "도우미"라고 생각합니다.

편집 : http://jsfiddle.net/y343Z/20/

transform-origin: left center 0; 

Answer 3

CSS의 변환이 요소가
matrix(a, b, c, d, tx, ty)으로 수행되는 변환 곳 정말 행렬은 다음과 같습니다

다른 사용자가 게시 된

, 당신은 또한 변환 - 기원 사용할 수 있습니다.당신이 계산 된 스타일을 볼 경우

는 그런 영리한 사람이 웹 디자이너는 매트릭스를 이해하는 것이 너무 복잡 할 것입니다 파악, 그래서 그들은 즉 등 transform: rotate()

처럼 속기 솔루션을 추가, '이 원 t는 회전 된 각도의 스타일이고, element.style.transform을 할 수없고 회전 각도를 다시 얻을 수는 없습니다. 행렬 만 있으면됩니다.

브라우저에서 행렬을 사용하므로 CSS 변환을 지원하는 모든 브라우저에서 해당 변환의 원점을 변경할 수 있으므로 요소를 회전 할 수 있으면 원점을 변경할 수 있습니다.

예외는 Microsoft의 필터입니다. 그러나 여기에서도 원점을 돌리거나 변경할 수 있습니다. 알아 내기가 조금 더 복잡합니다.

변환의 원점을 변경하지 않고 직접 계산하는 것은 당연히 똑같은 일을 할 것입니다. 단지 100 배는 더 복잡합니다. 실제로이 문제를 해결하기 위해 CSS에 추가해야합니다.

FIDDLE

-moz-transform-origin: 0 0; 
-o-transform-origin: 0 0; 
-webkit-transform-origin: 0 0; 
transform-origin: 0 0; 

그냥 다음 페이지의 하단에, MDN보고,이를 확인하기 위해, 당신은 브라우저 지원을 찾을 수 있습니다, 그것은으로, 변환 및 변환 - 기원 거의 동일합니다 너는 일반적으로 다른 사람이 없으면 하나도 가지지 않는다.

그것은 나를한다면 해당 사용자가 아마 요즘 어쨌든보고 이상한 일들에 사용되는로

https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

최종 참고로, 난, 아래 IE8과 걱정하지 않을 것입니다.

Answer 4

다른 사람들이 말한대로 transform-origin을 사용할 수 있습니다. 그러나 자바 스크립트를 통해 여전히이 작업을 수행하려는 경우이 jsfiddle에서이 작업을 수행했습니다.

기본적으로, 회전의 매트릭스 변환을 사용하여 각 그림의 왼쪽 상단 모서리의 회전 위치를 계산하는 것입니다. (그림은 (0, 0) 인 그림의 중심점을 가정합니다. 브라우저가 않습니다. 모서리의 새 위치를 계산하면 그 차이를 계산하고 원래의 left 및 top 위치에서 그 차이를 뺍니다. 나는 당신이 그것이 유익하다는 것을 알기를 바랍니다.

$(function() { 

    var isScaled = false; 
    var box = $('#box'); 

    box.on('click', function() { 
     if (isScaled) { 
      isScaled = false; 
      $(this).width('200'); 
      placeBox(400, 200); 
     } else { 
      isScaled = true; 
      $(this).width('400') 
      placeBox(200, 400); 
     }  
    }); 
    var left = parseInt(box.css('left')); 
    var top = parseInt(box.css('top')); 
    var angle = (345/360) * 2 * Math.PI; //in radians;  

    function placeBox(oldWidth, newWidth) { 
     var midHeight = box.height()/2; 
     var midOldWidth = oldWidth/2; 
     var midNewWidth = newWidth/2; 
     var cos = Math.cos(angle); 
     var sin = Math.sin(angle); 
     //rotation center coordinates 
     var cx1 = left + midOldWidth; 
     var cx2 = left + midNewWidth; 
     var cy = top + midHeight; 
     var mx1 = -midOldWidth * cos + midHeight * sin; 
     var my1 = -midOldWidth * sin - midHeight * cos; 
     var mx2 = -midNewWidth * cos + midHeight * sin; 
     var my2 = -midNewWidth * sin - midHeight * cos; 
     var difX = cx2 + mx2 - cx1 - mx1; 
     var difY = my2 - my1; 
     //now, position the element where it should: 
     box.css({ 
      left: (left - difX) + 'px', 
      top: (top - difY) + 'px' 
     }); 
    } 
})