Heim > Artikel > Web-Frontend > So verwenden Sie CSS zum Erstellen von Bildrotationseffekten

So verwenden Sie CSS zum Erstellen von Bildrotationseffekten

php中世界最好的语言Original: 2018-05-24 15:14:105264Durchsuche

Heute werde ich Ihnen beibringen, wie Sie mit CSS einen Bildrotationseffekt in HTML erstellen. Das einzige Kompatibilitätsproblem besteht jedoch darin, dass Browser unter IE9 nicht unterstützt werden Browser unterstützt H5, dieser Effekt wird unterstützt.

Der vollständige HTML-Code lautet wie folgt:

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

Diese HTML-Bilddrehung dient dazu, das Bild als Webseiten-Hintergrundbild zu drehen, kann aber entsprechend den tatsächlichen Anforderungen verwendet werden. Da es nicht mit niedrigeren Versionen des IE kompatibel ist, ist es nicht sehr praktisch.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Verwandte Lektüre:

Entwicklungserfahrung mit H-Tags in Webseiten

So optimieren Sie HTML-Webseiten

So konvertieren Sie HTML 2d und 3d

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Erstellen von Bildrotationseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie ein schönes Suchfeld mit CSSNächster Artikel：Erstellen Sie ein schönes Suchfeld mit CSS

In Verbindung stehende Artikel

Mehr sehen