CSS3の回転はどの軸を中心に回転しますか?-CSSチュートリアル-php.cn

CSS3の回転はどの軸を中心に回転しますか?

WBOY

リリース： 2021-12-16 17:38:58

オリジナル

3359 人が閲覧しました

css3 には回転のさまざまな状況があります: 1. "rotateX()" 関数によって実現される回転は X 軸の周りです; 2. "rotateY()" 関数によって実現される回転は X 軸の周りです。 Y軸; 3.「rotateZ」()」関数はZ軸周りの回転を実現します; 4.「rotate()」関数は原点周りの回転を実現します。

CSS3の回転はどの軸を中心に回転しますか?

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

css3 の回転はどの軸を中心にしますか

CSS では、回転は時計回り、反時計回り、または X、Y、Z 軸を中心とした回転にすることができます。異なる回転スタイルは異なる機能に対応します。

1.「rotate()」関数

「rotate()」関数を使用して、要素を時計回りまたは反時計回りに回転します。

例は次のとおりです:

<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

ログイン後にコピー

出力結果:

CSS3の回転はどの軸を中心に回転しますか?

##2. "rotateX()" 関数

X 軸を中心に要素を回転するには、「rotateX()」関数を使用します。例は次のとおりです:

<html>
<head>
<style> 
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

ログイン後にコピー

出力結果:

CSS3の回転はどの軸を中心に回転しますか?

3. "rotateY()" function

「rotateY()」関数を使用すると、要素をY軸を中心に回転させることができます。例は次のとおりです。

<html>
<head>
<style> 
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

ログイン後にコピー

出力結果:

CSS3の回転はどの軸を中心に回転しますか?

# #4、「rotateZ()」関数

「rotateZ()」関数を使用して、Z 軸を中心に要素を回転します。例は次のとおりです。

<html>
<head>
<style> 
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

ログイン後にコピー

出力結果:

CSS3の回転はどの軸を中心に回転しますか? (学習ビデオ共有:

css ビデオチュートリアル

)

以上がCSS3の回転はどの軸を中心に回転しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。