沿<div>元素</div>的指定边旋转CSS

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%;