jquery - 如何在不缩放内容的情况下缩放 div

Question

我有这个 div (id="myDiv")，当 div 在 css 下时 - 缩放所有它的子项也在缩放下。我需要 div 来放大而不是 child ，以一种“创造性的方式”我尝试了 2 件没有用的东西..如何在不缩放内容的情况下缩放 div？

HTML

<div id="myDiv">
<h3>Song</h3>
<p>
Strawberry fields forever
</p>
<div>

jQuery

$("#myDiv").css("transform", "scale(2,3)");   
//I tried to...
$("#myDiv").children().css("transform", "scale(-2,-3)");
$("#myDiv").children().css("transform", "scale(0,0)");

Answer 1

您需要为子元素向后计算。

例如，您在 x 轴上将 div 缩放 200%...要将子级缩小到 100%，您需要缩小到 50% (0.5)

y 轴同上 300%...因此 33% (0.3)

CSS

.scaled { /* the parent */
    transform: scale(2,3);
    transform-origin:top left;
 }

.scaled * { /* the children */
   transform: scale(.5, .33); 
}

Jsfiddle Demo

注意:如您所见，还存在变换原点问题以及您需要解决的其他间距问题。