CSS3相对于右上角翻译

Question

是否可以进行CSS3翻译，翻译的来源是右上角？我尝试过以下方法：

transform-origin: top right;
transform: translate3d(10px, 10px, 0);

（jsfiddle） 但翻译似乎仍然是从左上角开始的。是否可以通过右上角，左下角，右下角等进行翻译？

此图显示了上述CSS的结果。 （红色框从顶部翻译10px，从左边翻译10px）：

此图像显示了我想要的行为（红色框从顶部向下翻译10px，但从灰色容器的右侧翻译10px）。

我知道我可以使用：

来做到这一点

position: absolute;
top: 10px;
right: 10px;

但我的问题是：这可以通过使用CSS3翻译吗？

Answer 1

Translate获取渲染元素中的每个像素并移动它（在您的情况下，向下10px，向左10px）。

transform-origin是什么并不重要，因为渲染元素中的所有像素都经过完全相同的操作。