ホームページ > 記事 > ウェブフロントエンド > CSS を使用して画像の回転効果を作成する方法
CSS を使用して画像の回転効果を作成する方法
- php中世界最好的语言オリジナル
- 2018-05-24 15:14:105214ブラウズ
今日は、CSS を使用して HTML で画像の回転効果を作成する方法を説明します。画像は任意の角度で回転できますが、唯一の互換性の問題は、ブラウザが H5 をサポートしている限り、IE9 より前のブラウザをサポートしていないことです。 、この効果はサポートされています。
完全な HTML コードは次のとおりです:
<!DOCTYPE HTML>
<html>
<head>
<title>图片旋转 在线演示</title>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(30 * Math.PI / 120);
// 120为设置旋转角度
ctx.drawImage(img, 0, 0, 165, 60); // 165和60分别是图片宽度高度
}
}
</script>
</head>
<body onload='startup();'>
<p id="pw_body" style="width:100%;height:100%">
<canvas id="canvas" style="position: absolute; left: 300px; top: 100px;" width="800" height="600"></canvas>
</p>
<p>部分代码整理于网络</p>
</body>
</html>この HTML 画像の回転は、Web ページの背景画像として画像を回転させるためのものですが、実際のニーズに応じて使用できます。 IE の下位バージョンとは互換性がないため、あまり実用的ではありません。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。
関連書籍:
以上がCSS を使用して画像の回転効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで美しい検索ボックスを作成する次の記事：CSSで美しい検索ボックスを作成する