Центрирования divа в контейнере при использовании в css transform scale
 

Всем привет.
Дано: div#view контейнер (на нем весят все события), в котором находится еще один div#map с огромной матрицей divиков.cells внутри.
Задача: сделать #map перетаскиваемым и зумящимся с колесика мышки.
Проблема: я очень долго тупил над вопросом, что делать после применения к #map css trasform scale. Куда, насколько и что конкретно двигать.

Решение: Главная проблема была тут:

checkborders: function(){
 		this.border.left = 200 - (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.top = 200 - (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.right =  -200-30*114+window.innerWidth + (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
 		this.border.bottom= -200-20*66+window.innerHeight + (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
 	}

200 - реальный желаемый отступ по краям.
30*114 дивы в одной строчке на их ширину
20*66 строчки на высоту дивов

Рабочий пример для Firefox, Opera, Chrome: _http://mogame.org/test2.php
js, css, scale, transform, zoom, zooming, scaling, position div, mapping

morg4n,
у вас вопрос или презентация? и почему бы недоделать для ie

У меня был вопрос, но перед отправкой решил слегка упростить код и решение нашлось само собой. Я пытался найти информацию по этому вопросу в сети - у меня не вышло, поэтому решил поделиться, может кому пригодится.
В принципе вопрос совместимости с последними IE не так уж и плох, когда я допилю, выложу обновленный код. Но на текущем этапе разработки поддержка IE не является главной целью.

morg4n,
:write: :) для ie и нетолько ... http://learn.javascript.ru/play/vEZYec

Эта часть, я так понимаю:

view.element.style.transform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.webkitTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.msTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.mozTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";
        view.element.style.oTransform = "scale("+this.zoomdelta+","+this.zoomdelta+")";

У меня на деле отрисовка карты, тоже идет через js. IE ее вообще не рисует.

element: document.createElement("div"),

.....
build: function(){
//map cells json с координатами, айди, и прочей лабудой (далее нужны координаты)
a = map.cells;
		for(key in a){
			 if (a.hasOwnProperty(key)  && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294){
			 	var row;
			 	if(a[key][3] == 1){
			 		row = document.createElement("div");
			 		row.className = "row";
			 		map.element.appendChild(row);
			 	}
       			element = document.createElement("div");
//watter grass mountain из массива с вариантами текстур
       			element.className = map.terrain[a[key][8]][2];
       			element.className += " cell";

       			element.setAttribute("data-row",a[key][2]);
       			element.setAttribute("data-col",a[key][3]);

       			row.appendChild(element);
       			map.cells[key].element = element;
    			}
		}
		}

morg4n,
а консоль в ie что шепчет?

ie11. win81.
Ничего в консоли нет. было б че в консоли :)

Я что-то очень сильно туплю с зум эффектом. Сейчас при наведение на ячейку прямоугольную 128*64 пикселя (но так как они у меня накладываются друг на друга, рабочая область 128х32 обведена черной линией), я проверяю попадаю ли я в изометрическую часть ячейки, или на ее соседей (если левее или правее белых линий).


Вся магия в функции getBoundingClientRect(). Я, чесслово, не понимаю, по видимому, как работает гугл. Потому, что 'js element screen position' далеко не сразу привел меня к этой чудесной функции. Они мне все твердили про: scrollLeft, clientLeft, offsetLeft! Идиоты.

cellmouseover: function(e){
		if(!e) e = event || window.event;
		var cell = e.target;
		
		//чудо функция! положение ячейки, "начало координат"
		var pos = cell.getBoundingClientRect();

		var cellx=parseInt(cell.getAttribute("data-x")), 
			celly=parseInt(cell.getAttribute("data-y"));

		this.currentdiv = cell.id;

		zd = view.zoomdelta;
		
		posx = pos.left + e.pageX;
		posy = pos.top + e.pageY;
		

		posx = posleft + e.pageX;
		posy = postop + e.pageY;
		//левее первой белой линии
		if(posy < (64*zd - posx) / 2){
			celly--;
			}
		//правее второй белой линии
		else if(posy < (1/2)*(posx - 64*zd)){
			cellx++;
			}
		
		//предыдущая и текущая ячейки
		beforecell = this.currentcell;
		this.currentcell = cellx+"-"+celly;
		//снять выделение с прошлой и одеть на новую ячейки
		if(beforecell != this.currentcell && beforecell != 0)
			$(beforecell).classList.remove('selected');
		$(this.currentcell).classList.add('selected');
	}