Heim >Web-Frontend >CSS-Tutorial >Welche Eigenschaften in CSS können Rotationseffekte erzielen?

Welche Eigenschaften in CSS können Rotationseffekte erzielen?

青灯夜游
青灯夜游Original
2021-04-06 17:33:215200Durchsuche

Das Attribut, das den Rotationseffekt erzielen kann, ist „transformieren“ und muss zusammen mit Funktionen wie rotieren (), rotieren3d (), rotierenX (), rotierenY () verwendet werden. Das Transformationsattribut wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden, wodurch es gedreht, skaliert, verschoben oder geneigt werden kann.

Welche Eigenschaften in CSS können Rotationseffekte erzielen?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Das Attribut in CSS, das einen Rotationseffekt erzielen kann, ist „transformieren“. Das Attribut

transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Das

transform-Attribut kann den Attributwert der Drehung realisieren:

  • rotate(angle) definiert die 2D-Rotation und gibt den Winkel in den Parametern an.

  • rotate3d(x,y,z,angle) definiert die 3D-Rotation.

  • rotateX(angle) Definiert eine 3D-Rotation entlang der X-Achse.

  • rotateY(angle) Definiert die 3D-Rotation entlang der Y-Achse.

  • rotateZ(angle) Definiert die 3D-Rotation entlang der Z-Achse.

Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div,img,body{
        margin: 0;
        padding: 0;
    }
    img.touxiang:hover{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }
    img.touxiang{
        margin: 0 auto;
        display: block;
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        border-radius:100%;
    }
</style>
</head>
<body><br><br><br><br>
    <img src="touxiang.jpg" alt=""/>
</body>
</html>

Rendering:

Welche Eigenschaften in CSS können Rotationseffekte erzielen?

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften in CSS können Rotationseffekte erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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