CSS3 변환 된 요소의 크기 얻기

CSS3 변환을 적용한 div의 크기를 가져오고 싶습니다.CSS3 변환 된 요소의 크기 얻기

-webkit-transform: scale3d(0.3, 0.3, 1);

따라서 효과적으로 원래 크기의 30 %로 만들었습니다. 그러나 요소 width/height를 쿼리 할 때 변환이 적용되기 전에 요소의 크기가보고됩니다.

저는 이것이 실제로 올바른 동작이며 요소가 실제로 크기를 변경하지 않지만 내용은 변경된다는 것을 알고 있습니다. 하지만 여기에서 요구하는 이유는 요소를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 "요소 검사"를 선택하면 (현재 Mac에서 Safari를 사용하고 있습니다) 요소가 강조 표시되고 렌더링 된 크기는 요소에 첨부 된 브라우저 툴팁에 표시됩니다.

브라우저가 렌더링 된 크기를 알고 있지만 아직이 정보에 액세스 할 수있는 방법을 찾지 못했음을 나타냅니다. 누구든지 나를 도울 수 있습니까?

출처

2012-01-16 swervo

관련 항목 : http://stackoverflow.com/questions/7565542/width-height-after-transform/30157405#30157405 – abernier

와우, 예상보다 까다 롭습니다. 나는 쉬운 방법이 아니라는 점에서 당신만큼 놀랐습니다. 여기

Here is a proof of concept.

는 JS이다

$('div').each(function() { 
    var matrix = window.getComputedStyle(this).webkitTransform, 
     data; 
    if (matrix != 'none') { 
     data = matrix.split('(')[1].split(')')[0].split(','); 
    } else { 
     data = [1,null,null,1]; 
    } 
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]); 
});

키가 불쾌 유용되기 전에 배열로 해석해야하는 문자열로 매트릭스를 반환 getComputedStyle() 함수이다. 그러나 렌더링 된 크기를 얻기 위해 CSS 크기로 곱할 수있는 렌더링 된 변환 비율이 포함되어 있습니다.

참조 : CSS Tricks

출처

2012-01-16 17:33:05

정말 좋은 답변입니다. 그 덕분에 백만 달러! – swervo

당신은 크기를 얻기 위해 요소에 getBoundingClientRect() 방법을 사용할 수 있습니다. 변환 행렬을 고려하므로 (직접 수학을 수행 할 필요가 없습니다).

var elementDimensions = element.getBoundingClientRect();

jsFiddle.

출처

2012-06-06 02:32:09 alex

고맙습니다 @ 렉스. 나는 그것에 대해 몰랐다. 인생을 훨씬 편하게 해줍니다. – swervo

이 방법이 더 좋습니다 - 회전을 고려합니다 - rotateX (45deg)를 시도하십시오. anstosa의 사용법에 회전을 적용하면 높이가 0 – WebsterDevelopine

@WebsterDevelopine입니다. 변환 행렬에서 다른 방정식을 사용하기 때문에이 값을 구할 수 있습니다. – alex

CSS3 변환 된 요소의 크기 얻기

답변

관련 문제