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.
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:
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 */
}Das Transformationsattribut wendet die 2D- oder 3D-Konvertierung an . Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
transform: none|transform-functions;
| 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
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 */
}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.
transform-origin: x-axis y-axis z-axis;
| Wert | Beschreibung |
|---|---|
| X-Achse |
Definiert, wo auf der X-Achse die Ansicht platziert wird. Mögliche Werte:
|
| y-Achse |
definiert, wo die Ansicht auf der Y-Achse platziert wird. Mögliche Werte:
|
| z-axis |
definiert, wo die Ansicht auf der Z-Achse platziert wird. Mögliche Werte:
|
最后，给大家呢演示一个实例demo：
原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转：
图片：
源码：
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" >
效果展示：
你自行复制代码吧。。。！！！
推荐学习：《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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
