Maison > Article > interface Web > Comment utiliser CSS pour créer des effets de rotation d'image

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

php中世界最好的语言original: 2018-05-24 15:14:105263parcourir

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>

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!

php css html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créez un beau champ de recherche avec CSSArticle suivant：Créez un beau champ de recherche avec CSS

Articles Liés

Voir plus