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

Question

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

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

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

我有一个有效的jsbin。

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

Answer 1

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

http://jsbin.com/hilekawa/1/

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

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