css - 沿 a 指定边的 CSS 旋转元素

Question

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

-moz-transform: rotate(90deg)

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

谢谢。

Answer 1

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

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

所以你应该得到这样的结果：

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% 作为 transform-origin

例如，这将沿着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%;