CSS で画像を回転する方法: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成し、最後に css3 のtransform 属性を使用して要素を回転、拡大縮小、移動、または傾斜させます。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS を使用して画像を回転するにはどうすればよいですか?
css 画像の回転効果を設定するには、要素に 2D または 3D 変換を適用する css3 の transform 属性を使用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
transform 属性:
使用構文:
transform: none|transform-functions;
Internet Explorer 10、Firefox、および Opera は、transform 属性をサポートします。
Internet Explorer 9 は、代替の -ms-transform プロパティ (2D 変換のみ) をサポートしています。
Safari と Chrome は、代替の -webkit-transform プロパティ (3D および 2D 変換) をサポートしています。
Opera は 2D 変換のみをサポートします。
例:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:300px;
background-image:url(img/3.jpg);
/* 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></div>
</body>
</html>レンダリング:
[推奨学習: css ビデオ チュートリアル]
以上がCSSで画像を回転させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
