css - の指定された側に沿ったCSS回転エレメント

Question

<div>HTMLページの回転に関して1つの問題があります。利用した -

-moz-transform: rotate(90deg)

しかし、このプロパティは<div>いくつかの軸に沿って回転しています（それを取得できませんでした）。しかし、私はその下側に沿って回転させたい<div>です（ここでは、私のdivは正方形のボックスです）。出来ますか？

ありがとう。

Answer 1

変換のように聞こえます-起源はあなたが探しているものです。

CSSプロパティを使用すると、要素のtransform-origin変換の原点を変更できます。たとえば、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%;