css缩放原点,使用css3转换原点居中并缩放

我的页面上有一系列div。每个div都有一个背景图像，并以网格形式排列。我的网页上有不计其数的div。该页面被约束为一个大小使用使用css3转换原点居中并缩放

我想能够点击一个div，让它缩放到一个特定的比例，并居中。

我的标记：

我的CSS：

#pack1{

margin-left: 20px;

margin-top: 20px;

height: 193px;

width: 127px;

background-image: url(../images/image1.png);

background-size: 100% 100%;

float: left;

clear: both;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

#pack2{

margin-right: 20px;

margin-top: 20px;

height: 193px;

width: 127px;

background-image: url(../images/image2.png);

background-size: 100% 100%;

float: right;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

#pack3{

margin-left: 20px;

margin-top: 20px;

height: 193px;

width: 127px;

background-image: url(../images/image3.png);

background-size: 100% 100%;

float: left;

clear: both;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

#pack4{

margin-right: 20px;

margin-top: 20px;

height: 193px;

width: 127px;

background-image: url(../images/comingSoon.png);

background-size: 100% 100%;

float: right;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

#body,

.ui-page {

background-image: url(../images/bg.png);

background-size: auto 100%;

background-repeat: repeat-x;

}

#container {

margin: auto;

width: 310px;

height: 568px;

}

我有一个软糖几乎工程：

$(cardPack).click(function() {

var left = $(cardPack).position().left;

var top = $(cardPack).position().top;

$(cardPack).css("-webkit-transform", "scale(2.5,2.5)");

$(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4)));

});

但我认为这更像是一个巧合和运气。我的大脑并没有运行到可以设置transform-origin的位置，以便图像最终位于屏幕的中心，而不管它的起点如何。

我很乐意考虑transform-origin的替代方案来实现此目的。

编辑： A“不太演技一样，它在本地做”的jsfiddle：http://jsfiddle.net/a7Cks/9/

+0

我想你想使用'.offset'而不是'.position'，因为这是相对于文档的偏移量，而'.position'是相对于父项。 –

+0

不能 - 偏移量使得它更糟糕 - 位置给出了一个非常接近中心的值(一次我至少用不好的数学对它进行修正) –

+0

你可以使http://jsfiddle.net展示你的代码并使用绝对路径图像(或虚拟图像)，以便它们显示出来？然后，人们可以更轻松地编辑/播放以尝试和帮助您。 –