transform-origin 때문에 살았다..

CSS3 transform-origin Property

css3 속성중에  width, height, zoom 을 사용하여 오브젝트의 사이즈를 조절할 수 있지만 전체 컨테이너에 포함된 

모든 내용물들을 반영하려면 트랜스폼을 사용하여야한다.

예) 전체 컨테이너를 가로 10, 세로 20,  2배확대 하여 안의 상속된 내용들을 전부 반영 하려면

div{

    transform : translateX(10) translateY(20) scale(2, 2);

}

* scale(x, y) 

하면 되는데 문제는 이렇게 변형되고 나서 위치를 저장하거나 반영할때 원점이 이동되어있어서

비례식등으로 이동되고 축소된 거리만큼 계산해서 다시  x, y 를 -/+ 해주어야 하는데

이럴때 바로 transform-origin 속성으로 원점을 아예 0 0 으로 이동시키면 계산도 필요없고 말끔히 문제가 해결된다.

아래는 w3c schools 전문.

요소의 기본 배치를 설정합니다.

아래의 경우 회전 요소의 기본 배치를 설정.

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

transform-origin 속성을 사용하면 변환 된 요소의 위치를 변경할 수 있습니다.

2D 변환의 X축과 Y축을 변경할 수 있으며, 3D 변환 요소의 z축을 변경할 수 있다.

더욱 자세히 이해하기 위해서는 데모 보기를 추천한다.

주의! : 이 속성은 transform 속성과 함께 사용하여야 한다.

팁 : 3D변환을 위해서 더 나은 속성을 이해하기 위해서 데모 보기를 추천한다.

기본값 : 50%   50%   0

상속 : no

애니메이션가부 : 가능

버전 : css3

자바스크립트 문법 : object.style.transfoemOrigin = "0 0"

css 문법

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Values

Property Value	Description
x-axis	Defines where the view is placed at the x-axis. Possible values: left center right length %
y-axis	Defines where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	Defines where the view is placed at the z-axis (for 3D transformations). Possible values: length
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

출처 : http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

실무코드 : 나중에 정리.

<script>

function proportional($A, $a, $B, $Ax, $Bx)

{

//proportional(16, 9, 1920, 0, 0);

var Ax = $Ax || 0;

var Bx = $Bx || 0;

var b = ($B - Bx) / ($A - Ax) * ($a - Ax) + Bx;

return b;

}

//2016.04.27 허정진. iframe에 접근

//2016.05.27 허정진. iframe 드래그, 휠베이스 리사이즈 기능 추가

$(function(){

////////////////////////////////////////////////

$("iframe").load(function(){

var iframe_frame = $(this).contents();

//배경속성과 이미지파일을 숨김니다

iframe_frame.find("body").css("background-color", "transparent !important").attr("bgcolor", "transparent");

iframe_frame.find("#MapBase > img").attr('src', '');

iframe_frame.find("#watch").hide();

iframe_frame.find("#DivConfig").hide();

iframe_frame.find("#DivEdit").hide();

iframe_frame.find("#DivTree").hide();

iframe_frame.find("#DivHome").hide();

iframe_frame.find(".SolidTD").hide();

//

var json_XYT = <?=json_encode($arrXYT)?>;

for(var i=0; i<json_XYT.length; i++){

var X = Number(json_XYT[i].X);                                                                     

var Y = Number(json_XYT[i].Y);

var T = Number(json_XYT[i].T);

$("#ToTalDashBD_XYT_" + i).val( X + "|" + Y + "|" + T ); //각각의 인풋 박스에 XYT 수치 넣어준다.

var iframe_contents = $("#iframeConatainer_"+i+" > iframe").contents();

iframe_contents.find("body").attr({"Seq": i, "T" : T});

iframe_contents.find("body").css({

"transform-origin":"0 0", 

"transform": 'translateX('+X+'px) translateY('+Y+'px) scale('+T+')'

});

// 기본값으로 되돌리는 기능

$("#mapPosInitBtn_"+i).click(function(e){

e.preventDefault();

var num = $(e.currentTarget).attr('num');

console.log( num );

$("#iframeConatainer_"+num+" > iframe").contents().find('body').css({

transform: 'translateX('+1+'px) translateY('+1+'px) scale('+1+')'

//top:1,

//left:1,

//transform: 'scale(1)'

});

$("#iframeConatainer_"+num+" > iframe").contents().find('body').attr("T", 1);

$("#ToTalDashBD_XYT_" + num).val("1|1|1");

});

}//end for

// iframe의 body 드래그

var _AX = 1;

var _AY = 1;

iframe_frame.find("body").draggable({

disabled: false, //기본동작

cursor: "move",

scroll: false,

opacity: 0.7,

drag: function(event, ui){ 

var y = ui.position.top;

var x = ui.position.left;

//console.log( x, y );

},

//containment: "parent",

//containment: $(".view-container"),

stop:function(event, ui){

//var x = ui.position.left;

//var y = ui.position.top;

var y = ui.offset.top;

var x = ui.offset.left;

console.log( x,y );

// ex:) input_0 => 자기 자신의 인덱싱을 ID로 하는 input에 값을 넣어준다

var Seq = $(this).attr("Seq");

var input = $("#ToTalDashBD_XYT_" + Seq);

//리사이즈 이력 토큰이 존재하는지 먼저 검사한다

var strArr = input.val().split('|');

//strArr[0]; //x

//strArr[1]; //y

var t = strArr[2]; //t

var value = "";

value = x + "|" + y + "|" + t;

input.val(value);

},

grid:[_AX, _AY]

});

//휠 => 줌(1) 기준 0.03 씩 증감

iframe_frame.find('html').on("mousewheel DOMMouseScroll", function(e){

var E = e.originalEvent;

var dalta = 0;

if (E.detail) delta = E.detail * -40;

else delta = E.wheelDelta;

var T = Number($(this).find('body').attr('T'));

if( delta > 0 ) {

T += 0.03;

}else{

T -= 0.03;

}

T = T.toFixed(3);

T < 0.2 ? T = 0.2 : T;

//

$(this).find("body").css({ // 속성 적용은 iframe의 body

transform: 'scale('+ T +')'

//zoom: T

});

$(this).find('body').attr('T', T); //속성 적용하고 현재값으로 갱신

//인풋박스 제어

var Seq = $(this).find('body').attr("Seq");

var input = $("#ToTalDashBD_XYT_" + Seq);

var strArr = input.val().split('|');

strArr[0]; //x

strArr[1]; //y

var value = "";

value = strArr[0] + "|" + strArr[1] + "|" + T;

input.val(value);

});

}); //end. iframe load

////////////////////////////////////////////////

});

</script>