Aujourd'hui, je vais vous apprendre à utiliser CSS pour créer un effet de rotation d'image en HTML. L'image peut être pivotée sous n'importe quel angle. Cependant, le seul problème de compatibilité est qu'elle ne prend pas en charge les navigateurs inférieurs à IE9. Le navigateur prend en charge H5, cet effet est pris en charge.
Le code HTML complet est le suivant :
<!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>Cette rotation d'image html consiste à faire pivoter l'image comme image d'arrière-plan de page Web, mais elle peut être utilisée en fonction des besoins réels. Parce qu'il n'est pas compatible avec les versions inférieures d'IE, ce n'est pas très pratique.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php Autres articles liés !
Lecture connexe :
Expérience de développement à l'aide de balises h dans des pages Web
Comment optimiser les pages Web HTML
Comment convertir du HTML 2D et 3D
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
