ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3で回転回転ポイントを設定する方法
CSS3で回転回転ポイントを設定する方法
- WBOYオリジナル
- 2022-03-21 15:27:215501ブラウズ
CSS3 では、「transform-origin」属性を使用して、要素を回転する際の回転点を設定できます。この属性は、変換された要素の位置を変更するために使用され、回転の中心点を変更できます。構文は、「transform-origin」: x 軸 y 軸 z 軸;」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3で回転回転ポイントを設定する方法
2D回転とは、2次元平面内で要素を時計回りまたは反時計回りに回転させることを指します。 (transition トランジションと併用するとエクスペリエンスが向上します)
文法形式:
transform:rotate(度数);
注:
rotate の後に度が続き、単位は度です。たとえば、transform: rotate(180deg) は 180 度回転することを意味します;
角度が正の場合は時計回りに回転し、負の場合は反時計回りに回転します (transform:rotate(180deg) やtransform:rotate(-180deg) );
デフォルトの回転中心点は要素の中心点です。
回転の中心点を変更します:
transform-origin
要素を回転させる位置を設定できます。
transform-Origin プロパティを使用すると、変換された要素の位置を変更できます。
2D 変換要素は、要素の X 軸と Y 軸を変更できます。要素を 3D で変換し、要素の Z 軸も変更します。
文法形式:
transform-origin: x-axis y-axis z-axis;
注:
次のパラメータ x と y は、カンマではなくスペースで区切られます。
xy は、パラメータの中心です。デフォルトの変換 点は要素の中心点 (50% 50%);
xy にピクセルまたは方向名詞を設定することもできます (例: 上、下、左、右、中央)。
例は次のとおりです:
<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>出力結果:
(学習ビデオ共有: css ビデオチュートリアル)
以上がCSS3で回転回転ポイントを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。