css - translate用法 - transform用法




CSS转换元素大小调整 (2)

我发现了这个: 变换后的宽度/高度

还有其他几个,但没有什么不是我想要的。 我想要的是将某些东西缩放到它的大小的50%(当然有很好的动画过渡)并让页面布局重新调整到元素的新(可视)大小。 默认情况下似乎发生的是元素仍然在布局结构中保留其原始大小,并且仅使用关联的转换绘制。

基本上我希望用户单击一个文本块(或其他内容),然后将该文本缩放到它的大小的50%(或其他),并将其粘贴在下面的面板中以指示它已被选中。 我移动它后,我不希望元素周围有50%的空白。

我已经尝试重新设置高度/宽度,但这会导致元素自身进行新的布局,然后缩放应用于新的布局,这仍然留给我50%的空白完成后。 我的mozilla特定(为简单起见)代码如下所示:

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend', 
    function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },
    true) 
}
</script>

我真的希望我不必为了达到这个目的而弄清楚负利润或相对定位......

编辑:自写这篇文章以来,我发现了一个非常相似的问题,没有评论或答案。 它略有不同,因为我不关心它是一个html5特定的解决方案,我怀疑解决方案要么不存在,要么在CSS / javascript中,无论html级别如何。

使用CSS3变换scale()缩放/缩放DOM元素及其占用的空间

编辑2 :(另一个非工作尝试)

我也试过这个,但是缩放和平移函数似乎以一种使最终位置无法预测的方式相互作用......并且变换之前的缩放似乎与变换然后缩放相同。 不幸的是,这不仅仅是通过比例因子调整翻译的问题......

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e, container, x, y, scale) {
    var contX = posX(container);
    var contY = posY(container);
    var eX = posX(e);
    var eY = posY(e);
    var eW = e.offsetWidth;
    var eH = e.offsetHeight;

    var margin = 10;
    var dx = ((contX - eX) + margin + (x * eW * scale));
    var dy = ((contY - eY) + margin + (y * eH * scale));

    // assumes identical objects     
    var trans = 'translate(' + dx + 'px, ' + dy + 'px) ';
    var scale = 'scale(' + scale + ',' + scale + ') ';
    e.style.MozTransform =  trans + scale ; 
}

即使它工作,上面仍然需要我在运行此代码之前首先将元素移动到页面的底部(以摆脱空白),此外我需要重新计算重新调整大小的变换。所以我对这种尝试开始并不太满意。

另请注意,如果您使用scale + trans vs trans + scale ,则结果会有很大差异。

编辑3:我想出了放置问题...转换是按照指定的顺序应用的,并且scale(0.5,0.5)实质上将像素的大小更改为原来的一半(可能暗示它们如何在内部实现它)。 如果我把翻译放在第一位,翻译稍微少一点/更多来考虑由比例引起的左上角位置的变化就可以解决问题,但是管理对象的位置并在dom改变时调整变换合理的态度仍在逃避我。 这种感觉是错误的,因为我正朝着在javascript中编写我自己的布局管理器的方向漂移,只是为了获得这种效果。


我终于想出了一个简单的解决方案,它与我开始时的方式非常相似。

我承认,经过多次尝试才能弄明白(在过去一年左右)才能最终解决这个问题。 我其实是在寻找这个问题的答案。 我以前遇到过这个问题。 无论如何,我开始重新开始工作,我确实找到了一个简单的解决方案。

无论如何,诀窍是使用边缘底部和CSS calc脚本。

此外,您必须为对象(div)声明绝对高度。 如果div可以扩展,我不认为这将有效,否则,经过多次尝试和数小时后,我终于有了一个非常简单,干净,有效的解决方案。

因此,例如,height = 300px(不是30%,或没有高度)。 如果可以的话,我甚至会设置overflow-y = hidden。 如果你想让div增长(没有绝对高度),我相信你需要JavaScript。 我没试过。 否则,这在所有测试中都能正常工作。

我相信这对SASS或LESS很有用,因为你可以使用CSS中的变量声明一些重复的东西。 我还没有尝试过。

对我的解决方案的一些重要评论

  1. 注意我使用对象的高度和CSS计算方法以及变换大小来计算底部边距。
  2. 我对我的作品进行了颜色编码,以帮助展示正在发生的事情
  3. wrap div确实有填充只是为了表明它正在工作。 它们是绝对的,不会影响内部对象。
  4. 如果您正在构建响应式页面,就像我一样,您可以使用媒体查询与类来获得相同的效果。
  5. 我正在使用transform-origin:50%0; 这段代码最终没有我原先想象的那么重要。 我使用底部边距来解决我遇到的问题。
  6. 在这个例子中,我只是将父div中的div居中。 如果您需要放置div,它会稍微复杂一些,但类似的解决方案也可以。 我没有尝试过。
  7. 您可以使用与jQuery和CSS相同的解决方案。 这个想法是一样的。 您将在页面中使用变换搜索所有元素,并根据需要添加CSS。

我还设置了一个Codepen来测试它和共享。

https://codepen.io/cyansmiles/details/yvGaVP

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
}

.box.size-80 {
  transform: scale(0.8);
  margin: 0 auto calc(-150px * (1 - 0.8));
}

.box.size-70 {
  transform: scale(0.7);
  margin: 0 auto calc(-150px * (1 - 0.7));
}

.box.size-60 {
  transform: scale(0.6);
  margin: 0 auto calc(-150px * (1 - 0.6));
}

.box.size-50 {
  transform: scale(0.5);
  margin: 0 auto calc(-150px * (1 - 0.5));
}

//etc
<div class="box-wrap">
  <div class="box">
    <h1>Box at 100%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
</div>


我不得不从上面稍微调整一下我的代码。

它现在适用于所有方面(不仅仅是上下)。 我看到一点编辑,我认为这是CSS问题(你可以在代码中添加另一个像素来解决这个问题)。

这是工作Codepen链接。 如果您使用它,请随时告诉我。 终于搞清楚这一点感觉很好。

https://codepen.io/cyansmiles/pen/bLOqZo

PS。 我要求我的codepen添加一个可移动的CSS。

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
  color: #fff;
}

.box.size-80 {
  background: red;
  transform: scale(0.8);
  margin: 0 calc((-300px * (1 - 0.8)) / 2) calc(-150px * (1 - 0.8));
}

.box.size-70 {
  background: blue;
  transform: scale(0.7);
  margin: 0 calc((-300px * (1 - 0.7)) / 2) calc(-150px * (1 - 0.7));
}

.box.size-60 {
  background: green;
  transform: scale(0.6);
  margin: 0 calc((-300px * (1 - 0.6)) / 2) calc(-150px * (1 - 0.6));
}

.box.size-50 {
  background: orange;
  transform: scale(0.5);
  margin: 0 calc((-300px * (1 - 0.5)) / 2) calc(-150px * (1 - 0.5));
}

//etc
<div class="box-wrap">
  <h1>This is a bunch of boxes!</h1>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box">
    <h1>Box at 100%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
</div>







css-transforms