CSS旋转沿着指定的一侧 element

Question

关于在html页面中旋转<div>我有一个问题。我用过 -

-moz-transform: rotate(90deg)

但是这个属性是沿着某个轴旋转<div>。（无法得到）。但我想沿着它的底部旋转<div>。（这里，我的div是一个方框）。可能吗？

谢谢。

Answer 1

听起来像transform-origin是你正在寻找的。

transform-origin CSS属性允许您修改元素转换的原点。例如，rotate（）函数的transform-origin是旋转中心。 （通过首先使用属性的否定值转换元素，然后应用元素的转换，然后通过属性值进行转换来应用此属性。）

所以你应该得到这样的东西：

transform: rotate(90deg);
transform-origin: center bottom;
/*transform-origin: 50% 100%;    alternative using percentages */

Answer 2

你可以使用这个属性

transform: rotate(90deg);
transform-origin: center bottom;

Answer 3

您可以将X％和Y％作为变换原点

例如，这将沿着bottom-left角旋转div

  transform: rotate(-10deg);
  transform-origin: 0% 100%;

这一个沿着右上角旋转

  transform: rotate(-10deg);
  transform-origin: 100% 0%;

这一个沿着右下角旋转

  transform: rotate(-10deg);
  transform-origin: 100% 100%;

依此类推......默认情况下为50％，50％

  transform: rotate(-10deg);
  transform-origin: 50% 50%;