Comment utiliser CSS pour créer des effets de rotation d'image-tutoriel CSS-php.cn

Comment utiliser CSS pour créer des effets de rotation d'image

php中世界最好的语言

Libérer： 2018-05-24 15:14:10

original

5244 Les gens l'ont consulté

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(&#39;canvas&#39;);  
var ctx = canvas.getContext(&#39;2d&#39;);  
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=&#39;startup();&#39;> 
<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>

Copier après la connexion

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!