如何使用 CSS 过渡来固定缩放元素的位置？答案

【问题标题】：How do I use CSS transitions to fixed position a scaled element?如何使用 CSS 过渡来固定缩放元素的位置？
【发布时间】：2014-05-12 15:02:59
【问题描述】：

这似乎是我缺乏理解。这个SO question 提供了一些见解，但并不完全是我想要做的。

我有一个 DIV，我想像最小化效果一样缩小和重新定位它。我可以使用缩放来执行此操作，但它保留了用于定位的原始大小（如预期的那样）我想分离元素。

.scales.tiny {
  transform: scale(0.3);
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
}

我有一个工作的jsbin 来说明这一点。

如何在 CSS 中重新定位/剪辑缩放的元素？

【问题讨论】：

标签： css

【解决方案1】：

您可以使用transform-origin锁定右侧的转换，然后添加翻译将其向下移动：

.scales {
    -webkit-transform-origin: 100% 100%;
}

.scales.tiny {
    -moz-transform: scale(0.3) translateY(500px);
}

【讨论】：