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

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

WBOY

リリース： 2022-03-21 15:27:21

オリジナル

5504 人が閲覧しました

CSS3 では、「transform-origin」属性を使用して、要素を回転する際の回転点を設定できます。この属性は、変換された要素の位置を変更するために使用され、回転の中心点を変更できます。構文は、「transform-origin」: x 軸 y 軸 z 軸;」です。

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

このチュートリアルの動作環境: 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>

ログイン後にコピー

出力結果:

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