ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3の回転はどの軸を中心に回転しますか?
CSS3の回転はどの軸を中心に回転しますか?
- WBOYオリジナル
- 2021-12-16 17:38:583393ブラウズ
css3 には回転のさまざまな状況があります: 1. "rotateX()" 関数によって実現される回転は X 軸の周りです; 2. "rotateY()" 関数によって実現される回転は X 軸の周りです。 Y軸; 3.「rotateZ」()」関数はZ軸周りの回転を実現します; 4.「rotate()」関数は原点周りの回転を実現します。
このチュートリアルの動作環境: 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>出力結果:
##2. "rotateX()" 関数
X 軸を中心に要素を回転するには、「rotateX()」関数を使用します。例は次のとおりです:<html>
<head>
<style>
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>出力結果:
3. "rotateY()" function
「rotateY()」関数を使用すると、要素をY軸を中心に回転させることができます。例は次のとおりです。<html>
<head>
<style>
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>出力結果:
「rotateZ()」関数を使用して、Z 軸を中心に要素を回転します。例は次のとおりです。
<html>
<head>
<style>
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>出力結果:
(学習ビデオ共有:
以上がCSS3の回転はどの軸を中心に回転しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。