Wie lege ich die Basisposition eines gedrehten Elements in CSS fest?
CSS oder Cascading Style Sheets ist ein leistungsstarkes Tool, das eine Reihe von Effekten zum Erstellen schöner, dynamischer Webseiten bietet. Eines der wichtigsten Werkzeuge im CSS ist die Möglichkeit, Elemente zu drehen. Durch rotierende Elemente entstehen einzigartige Designs und Animationen, die die Aufmerksamkeit der Benutzer fesseln und dabei helfen, die Botschaft zu vermitteln. Hier erfahren Sie, wie Sie die Basisplatzierung eines gedrehten Elements in CSS festlegen.
CSS中的Transform属性
Die Transform-Eigenschaft ermöglicht die Anwendung verschiedener Transformationen auf Elemente, einschließlich Drehung, Skalierung und Neigung. Wenn eine Transformation auf ein Element angewendet wird, ändert sich die Basisposition des Elements, was es schwierig macht, das Element richtig zu positionieren.
Drehen, Skalieren, Neigen und Verschieben sind Untereigenschaften der Transformationseigenschaft. Hier konzentrieren wir uns auf die gedrehte Untereigenschaft. Mit der Rotate-Eigenschaft können Sie ein Element um einen festen Punkt auf der Seite drehen.
在CSS中的元素旋转
Um ein Element in CSS zu drehen, wird die Transformationseigenschaft mit der Funktion „rotate()“ verwendet.
Syntax
<style>
scc-selector{
transform: rotate(angle);
}
</style>
在这里，„Winkel“ 是以度为单位指定要应用于元素的旋转量.
Der folgende Code dreht beispielsweise ein Element um 30 Grad −
.rotate {
transform: rotate(30deg);
}
Die Position des gedrehten Elements wird entsprechend dem Drehwinkel angepasst. Dies kann dazu führen, dass sich das Element aus seiner ursprünglichen Position verschiebt, was problematisch sein kann, um es richtig zu halten.
CSS中可用的旋转变换类型
在中在各种类型的旋转变换可用,如rotate()、rotateX()、rotateY()和rotateZ()。rotate()函数围绕元素的中心点旋转，而rotateX() Verwenden Sie rotateY() Drehen Sie die Funktion rotateZ()
设置旋转元素的基础位置的重要性
- Die Grundposition des gedrehten Elements bestimmt, wo es im Verhältnis zu seinem Container verankert ist. Standardmäßig ist die Basisplatzierung auf die Mitte des Elements eingestellt. Die Basisplatzierung kann jedoch mithilfe der Eigenschaft „transform-origin“ angepasst werden. Dies ist wichtig, da es die Positionierung des Elements auf der Seite beeinflussen kann.
- 使用 transform-origin 属性来调整旋转元素的基本位置
- Mit der Eigenschaft transform-origin kann die Basisposition eines gedrehten Elements angepasst werden. Diese Eigenschaft gibt den Punkt an, um den ein Element gedreht wird. Standardmäßig ist die Basisplatzierung die Mitte des Elements, was bedeutet, dass das Element um seinen Mittelpunkt gedreht wird.
- Um die Basisplatzierung anzupassen, können wir die Eigenschaft transform-origin auf einen anderen Wert setzen.
.placed {
transform-origin: top left;
transform: rotate(30deg);
}
示例1:围绕其中心旋转一个正方形
在这个例子中,我们使用transform属性将正方形旋转30度,基准位置默认设置为中心.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.outer-line {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
#box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(30deg);
}
</style>
</head>
<body>
<h3>The square is rotated by 30 degrees around its center point</h3>
<div class="outer-line">
<div id="box"></div>
</div>
</body>
</html>
In diesem Beispiel drehen wir das Quadrat mithilfe der Transformationseigenschaft um 30 Grad und setzen dann die Transform-Origin-Eigenschaft auf unten rechts.
<html>
<head>
<style>
body { text-align: center; }
.outer-line {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
#box {
width: 100px; height: 100px;
background-color: red;
transform: rotate(30deg);
transform-origin: bottom right;
position: absolute;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<h3>The square is rotated by 30 degrees around its bottom-right corner</h3>
<div class="outer-line">
<div id="box"></div>
</div>
</body>
</html>
In diesem Beispiel erstellen wir ein Quadrat mit roter Hintergrundfarbe in einem Container und legen seine Anfangsposition mithilfe der Werte „position: absolut“, „oben“ und „links“ fest. Außerdem legen wir seine Breite und Höhe auf 100 Pixel fest und verwenden dann die Animationseigenschaft, um eine Keyframe-Animation namens Drehen anzuwenden. Diese Animation läuft 2 Sekunden lang und wird unendlich oft wiederholt.
最后,这个动画创建了一个旋转效果,其中元素的基本位置从中心变为左上角,然后变为右下角,最后又回到中心.
<html>
<head>
<style>
body { text-align: center; }
.container {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
.sqr {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
transform-origin: center;
}
50% {
transform: rotate(180deg);
transform-origin: top left;
}
100% {
transform: rotate(360deg);
transform-origin: bottom right;
}
}
</style>
</head>
<body>
<h3>Rotating animation that changes the element's base placement</h3>
<div class="container">
<div class="sqr"></div>
</div>
</body>
</html>
在这里，我们讨论了如何使用CSS旋转元素。通过按照本文中给出的示例,我们可以确保旋转的元素在不同设备上的位置正确且一致.
Das obige ist der detaillierte Inhalt vonWie lege ich die Basisposition eines gedrehten Elements in CSS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen?
Mar 14, 2025 am 11:10 AM
In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
