So implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS

藏色散人
Freigeben: 2023-01-31 11:12:16
Original
2883 Leute haben es durchsucht

So drehen Sie CSS mit einem Punkt als Fixpunkt: 1. Erstellen Sie eine neue HTML-Datei. 2. Importieren Sie Bilder über img. 3. Fügen Sie das CSS-Attribut als „@keyframes rotation{0%{transform:“ hinzu. rotieren(0deg); }100%{transform: rotieren(360deg);}}" kann eine Drehung mit einem Punkt als Fixpunkt realisieren.

So implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie erreicht man eine Festkommarotation mit CSS?

CSS zum Implementieren der Bilddrehung und Festlegen des Drehpunkts

Machen Sie zunächst einige technische Kenntnisse bekannt:

Beispiel

Div-Element drehen:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}
Nach dem Login kopieren

Definition und Verwendung

Das Transformationsattribut wendet die 2D- oder 3D-Konvertierung an . Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

Syntax

transform: none|transform-functions;
Nach dem Login kopieren
Wert Beschreibung
none Definition Es wird keine Konvertierung durchgeführt.
matrix(n,n,n,n,n,n) definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten.
matrix3d(n,n,n,n,n,n,n,n,n,n, n, n,n,n,n,n) Definieren Sie die 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten.
translate(x,y) definiert die 2D-Transformation.
translate3d(x,y,z) 3D-Transformation definieren.
translateX(x) definiert die Transformation, indem einfach der Wert der X-Achse verwendet wird.
translateY(y) definiert die Transformation, indem einfach der Y-Achsenwert verwendet wird.
translateZ(z) definiert eine 3D-Transformation, indem einfach der Wert der Z-Achse verwendet wird.
scale(x,y) definiert die 2D-Skalierungstransformation.
scale3d(x,y,z) Definieren Sie die 3D-Skalierungstransformation.
scaleX(x) Definieren Sie die Skalierungstransformation, indem Sie den Wert der X-Achse festlegen.
scaleY(y) Definieren Sie die Skalierungstransformation, indem Sie den Wert der Y-Achse festlegen.
scaleZ(z) Definieren Sie die 3D-Skalierungstransformation, indem Sie den Wert der Z-Achse festlegen.
rotate(angle) definiert die 2D-Rotation und gibt den Winkel in den Parametern an.
rotate3d(x,y,z,Angle) 3D-Rotation definieren.
rotateX(angle) definiert eine 3D-Rotation entlang der X-Achse.
rotateY(angle) definiert eine 3D-Rotation entlang der Y-Achse.
rotateZ(angle) definiert eine 3D-Rotation entlang der Z-Achse.
skew(x-angle,y-angle) definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse.
skewX(angle) definiert eine 2D-Schrägtransformation entlang der X-Achse.
skewY(angle) definiert eine 2D-Schrägtransformation entlang der Y-Achse.
perspective(n) Definiert eine perspektivische Ansicht für ein 3D-Transformationselement.

Dann ist das Problem, auf das die meisten Menschen dabei stoßen, der Ausgangspunkt, nämlich das Problem des Rotationspunkts. Ich möchte, dass er sich so umdreht, warum gehorcht er nicht?

Hier geht es um Transformationsursprung

Beispiel

Legen Sie die Basispunktposition des gedrehten Elements fest:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}
Nach dem Login kopieren

Definition und Verwendung

Mit dem Attribut transform-origin können Sie die Position des transformierten Elements ändern.

2D Transform Element kann die x- und y-Achse des Elements ändern. 3D-Transformationselemente können auch ihre Z-Achse ändern.

Um die Transformations-Ursprungseigenschaft besser zu verstehen.

Safari/Chrome-Benutzer: Zum besseren Verständnis der Verwendung der Eigenschaft „transform-origin“ für 3D-Transformationen.

Hinweis: Dieses Attribut muss zusammen mit dem Transformationsattribut verwendet werden.

Syntax

transform-origin: x-axis y-axis z-axis;
Nach dem Login kopieren
Wert Beschreibung
X-Achse

Definiert, wo auf der X-Achse die Ansicht platziert wird. Mögliche Werte:

  • links
  • Mitte
  • rechts
  • Länge
  • %
y-Achse

definiert, wo die Ansicht auf der Y-Achse platziert wird. Mögliche Werte:

  • top
  • center
  • bottom
  • length
  • %
z-axis

definiert, wo die Ansicht auf der Z-Achse platziert wird. Mögliche Werte:

  • Länge

最后,给大家呢演示一个实例demo:

原始图片为一个黑色正方形,我们希望它根据左上角的顶点进行旋转:

图片:

So implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS

源码:

nbsp;html>

	
		<meta>
		<title></title>
		<style>
			img{
				margin-top: 200px;
				margin-left: 500px;
				width: 100px;
				height: 100px;
				display: block;
   				 animation: rotate 6s linear infinite;
   				 transform-origin:0 0;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
					
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	
	
		
		<img  alt="So implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS" >
		
	
Nach dem Login kopieren

 效果展示:

So implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS

你自行复制代码吧。。。!!! 

推荐学习:《css视频教程

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Drehung mit einem Punkt als Fixpunkt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage