집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 이미지 회전 효과를 만드는 방법

CSS를 사용하여 이미지 회전 효과를 만드는 방법

php中世界最好的语言원래의: 2018-05-24 15:14:105317검색

오늘은 CSS를 사용하여 HTML에서 이미지 회전 효과를 만드는 방법을 가르쳐 드리겠습니다. 이미지는 어떤 각도로도 회전할 수 있지만 유일한 호환성 문제는 브라우저가 H5를 지원하는 한 IE9 이하의 브라우저를 지원하지 않는다는 것입니다. , 이 효과가 지원됩니다.

전체 HTML 코드는 다음과 같습니다.

<!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>

이 html 이미지 회전은 이미지를 웹 페이지 배경 이미지로 회전시키는 것이지만 실제 필요에 따라 사용할 수 있습니다. IE 하위 버전과 호환되지 않기 때문에 그다지 실용적이지 않습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!