Javascript 使用“变换”“平移”和“缩放”使用div缩放容器

我想缩放一个容器与div点击，只使用css变换和规模。问题是，它只在第一次点击，第二次，第三次。。。我的div翻译得很奇怪。对我来说，最重要的是缩放背景

var标度=0.5；
var区间=5；
var line_权重=1；
$（'document'）.ready（函数（）{
$（“#容器”）。单击（函数（）{
$（'.test'）。每个（函数（i）{
var position=$（this.position（）；
var positionL=位置。左侧；
var position t=位置.top；
变量位置标度=位置T*标度；
变量位置标度=位置L*标度；
var translateX=-（位置L位置刻度）*（1/刻度）；
var translateY=-（位置T位置刻度）*（1/刻度）；
$（this）.css（'transform'、'scale（'+scale++'）、'+translateX++'px'+'、'+translateY++'px'）；
});
$（“.test”）.css（'background'，'repeated linear gradient（0度，#000，#000'+线重/刻度+'''#FFFFFFFF 0，#ffffff'+刻度*间隔+'px'）；
$（“.test”）.css（'border-right'，（线宽）+'px-solid'）；
});
$（“#容器”）.dblclick（函数（）{
$（“.test”）.css（'transform'，'scale（1.0）'）；
$（“.test”）.css（'background'，'repeated linear gradient（0度，#000，#000'+线重量+'，#FFFFFFFF 0，#ffffff'+间隔+'px'）；
$（“.test”）.css（'border-right'，line_-weight+'px-solid'）；
});
}); 

正文{
宽度：19200px；
高度：10750px；
}
.测试{
高度：200px；
宽度：160px；
显示：内联块；
右边框：1px实心；
背景：重复线性梯度（0度，#000，#000 1px，#ffffff 0，#ffffff 5px）；
}
#容器{
宽度：340px；
高度：400px；
}
.栏目{
显示：内联块；
}

test1
test2
test3
test4

您需要的只是更改

变换：缩放（值）

中的值。 我为示例添加了两个按钮，用于放大和缩小：

<p class="zoom _bigger">
    zoom++
</p>
<p class="zoom _smaller">
    zoom--
</p>

我用了一个半数值来缩放，你可以用它来设定你想要的

你可以退房

$('document').ready(function(){
  // We set value as 2, because further we will zoom with a half
  var zoomValue = 2;

  $('.zoom').on('click', function(){               
    if ($(this).hasClass('_bigger')) {
      zoomValue++;
    } else if (zoomValue > 2) {
      zoomValue--;
    } else {
      return false;
    }            
      $('#container').css('transform', 'scale(' + zoomValue * 0.5 + ')');
    });
});