suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie drehe ich ein Bild in HTML?

Wie drehe ich ein Bild in HTML?

WBOY
WBOYnach vorne
2023-09-01 09:37:061750Durchsuche

如何在 HTML 中旋转图像？

Bilder sind ein wichtiger Teil von Webseiten und manchmal müssen sie gedreht werden, damit sie besser aussehen oder in die Webseite passen. Die Bilddrehung in HTML ist ein relativ einfacher Vorgang und kann mithilfe von CSS durchgeführt werden.

Der Vorgang, die Ausrichtung eines Bildes aus einem bestimmten Winkel zu ändern, wird als Bilddrehung bezeichnet. Die CSS-Transformationseigenschaft ist eine gängige und einfache Möglichkeit, ein Bild zu drehen. Diese Eigenschaft wird zum Verschieben, Drehen, Skalieren und Durchführen verschiedener Elementtransformationen verwendet.

Grammatik

Hier ist die Syntax zum Drehen eines Bildes in HTML – 

<style>
   transform: rotate(angle);
</style>

Hier „Winkel“ ist der Betrag der Drehung, die auf das Element angewendet wird, angegeben in Grad.

Wie drehe ich ein Bild in HTML?

Bilder sind ein wichtiger Bestandteil des Webdesigns, da sie die visuelle Attraktivität der Website steigern und den Benutzern Informationen liefern. Es gibt viele Möglichkeiten, Bilder in HTML zu drehen, einschließlich der CSS-Transformationseigenschaft, Hover-Effekten und Animationen.

Hier werden wir diese Methoden einzeln besprechen –

Verwenden Sie CSS-Transformationseigenschaften

Das Transformationsattribut ist die am häufigsten verwendete Methode in CSS, um ein Bild oder Element zu drehen. Die Funktion „rotate()“ wird zum Drehen von Elementen verwendet. Die Funktion „rotate()“ verwendet einen Gradwert als Parameter, um den Drehwinkel anzugeben. Um beispielsweise ein Bild um 90 Grad zu drehen, können wir den folgenden CSS-Code verwenden −

.my-img {
   transform: rotate(90deg);
}

Der obige Code dreht das Bild mithilfe der Transformationseigenschaft um 90 Grad.

Beispiel 1

Hier ist ein vollständiges Codebeispiel zum Drehen eines Bildes um 90 Grad mithilfe der CSS-Transformationseigenschaft. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .my-img {
         transform: rotate(90deg);
         margin-top: 10px;
         padding: 5px;
         border: 5px solid #555;
      }
      img {
         margin-top: 5px;
         padding: 5px;
         border: 5px solid #555;
      }
   </style>
</head>
   <body>
      <h3>Normal Image</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" alt="Example Image">
      <h3>Rotated image by 90 degrees using css transform property</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Verwenden Sie CSS-Hover-Effekte

Um dynamische und interaktive Webseiten zu erstellen, sind CSS-Hover-Effekte eine beliebte Methode zum Drehen von Bildern. In CSS können wir ganz einfach einen Hover-Effekt hinzufügen, der bewirkt, dass sich das Bild dreht, wenn der Benutzer mit der Maus darüber fährt. Dazu verwenden wir die Pseudoklasse :hover in CSS. Hier ist ein Beispiel −

<style>
.img:hover {
   transform: rotate(60deg);
}
</style>

Im obigen Beispiel verwenden wir die Pseudoklasse :hover, um einen Rotationseffekt anzuwenden, wenn der Benutzer mit der Maus über das Bild fährt. Verwenden Sie das Attribut transform, um das Bild um 60 Grad zu drehen.

Beispiel 2

Hier ist ein vollständiges Codebeispiel, das die Pseudoklasse :hover verwendet, um ein Bild um 60 Grad zu drehen. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      img{
         border: 5px solid #555;
         transition: transform 0.5s ease;
      }
      .my-img:hover {
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Hover me to rotate by 60 degrees</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Verwenden Sie CSS-Animationen

Die Verwendung von CSS-Animationen zum Drehen von Bildern ist eine weitere Möglichkeit, dynamische und interaktive Webseiten zu erstellen. In CSS können wir einem Bild ganz einfach Animationen hinzufügen, sodass es sich kontinuierlich oder für eine bestimmte Dauer dreht. Dazu können wir den folgenden Code verwenden. 

<style>
.my-img {
   border: 5px solid #555;
   margin-top: 20px;
   animation: rotation 4s infinite linear;
}
@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}
</style>

Im obigen Code verwenden wir die Animationseigenschaft, um eine sich kontinuierlich wiederholende Rotationsanimation zu erstellen. @keyframes-Regeln werden zum Definieren von Rotationsanimationen verwendet. Das Schlüsselwort from legt den Startpunkt der Animation fest und das Schlüsselwort to legt den Endpunkt fest.

Beispiel 3

Dies ist ein vollständiges Codebeispiel für das Drehen eines Bildes in einer Schleife mithilfe von CSS-Animationsmethoden. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .my-img {
         border:5px solid #555;
         margin-top:20px;
         animation: rotation 4s infinite linear;
      }
      @keyframes rotation {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
   <body>
      <h3>To rotate an image in a circular way using CSS</h3>
      <img src="/images/html.gif" class="my-img"></div>
   </body>
</html>

Fazit

Das Drehen von Bildern mithilfe von HTML ist eine großartige Möglichkeit, Ihren Webseiten visuelles Interesse zu verleihen. Anhand des obigen Beispiels können wir sehen, wie einfach es ist, ein Bild mit verschiedenen Methoden wie Grad, Hover-Effekten und Animation zu drehen.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Bild in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 循环 伪类 transform animation
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich ein Dreieck in CSS?Nächster Artikel：Wie erstelle ich ein Dreieck in CSS?

In Verbindung stehende Artikel

Mehr sehen