CSS3で回転ポイントの位置を設定する方法-CSSチュートリアル-php.cn

CSS3で回転ポイントの位置を設定する方法

WBOY

リリース： 2021-12-23 15:50:22

オリジナル

7771 人が閲覧しました

CSS では、「transform-Origin」属性を使用して要素の回転点の位置を設定できます。この属性を使用すると、変換された要素の位置を変更できます。要素間の距離を設定できます。変換後の要素とそれぞれX軸、Y軸、Z軸、位置、構文は「transform-origin:X軸方向、Y軸方向、Z軸方向;」となります。

CSS3で回転ポイントの位置を設定する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3回転ポイントの位置を設定する方法

transform-Origin プロパティを使用すると、変換された要素の位置を変更できます。

2D 変換要素は、要素の X 軸と Y 軸を変更できます。要素を 3D で変換し、要素の Z 軸も変更します。

transform-origin 属性が設定されていない場合、CSS 変形による回転、移動、拡大縮小などの操作は、要素自身の中心(変形原点/中心点)の位置を基準に変形されます。 CSS3 のtransform-origin 属性は、回転する要素の基点の位置を設定するために使用されます。transform-origin を CSS3 アニメーションと組み合わせてよく使用すると、要素を特定の基点に沿って回転、シフトなどさせることができます。

例は次のとおりです:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSS3で回転ポイントの位置を設定する方法