web-dev-qa-db-ja.com

基準点に対するCSSの回転

定義された点、つまり定義されたx＆y座標を基準に要素を回転する方法[〜＃〜] css [〜＃〜]（webkit）？

通常、回転は要素の中心点を基準にします。

cssrotation
23
thecodeparadox

あなたはtransform-Originを使うことができます。要素の左上隅から回転する点を定義します。

transform-Origin: 0% 0%

これは左上隅を中心に回転します。

他のオプションについては、こちらをご覧ください： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-Origin

このリンクが利用できない場合のより安全な側面のために、ここにいくつかの追加オプションがあります

transform-Origin: center; // one of the keywords left, center, right, top, and bottom

transform-Origin: top left; // same way can use two keywords

transform-Origin: 50px 50px; // specific x-offset | y-offset

transform-Origin: bottom right 60px; // third part is for 3D transform : z-offset

私が知る限り、固定点を中心に回転するオプションはありません（ただし、これは便利です）。

56
kufi

特定のオフセットが必要な場合、1つの方法は、画像を編集して大きくし、中央が画像の中央になるようにすることです。次に、これを「overflow：none」を使用してDIV内に配置し、相対配置で配置できます。 divは、表示したくないイメージの領域をマスクします。

1
Philip Callender