Wie lege ich die Basisposition eines gedrehten Elements in CSS fest?-CSS-Tutorial-php.cn

Wie lege ich die Basisposition eines gedrehten Elements in CSS fest?

WBOY

Freigeben： 2023-08-27 14:21:07

nach vorne

1396 Leute haben es durchsucht

如何在 CSS 中设置旋转元素的基本位置？

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>

Nach dem Login kopieren

在这里，„Winkel“ 是以度为单位指定要应用于元素的旋转量.

Der folgende Code dreht beispielsweise ein Element um 30 Grad −

.rotate {
   transform: rotate(30deg);
}

Nach dem Login kopieren

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.

Der folgende Code legt die Basisplatzierung auf die obere linke Ecke des Elements fest −

.placed {
   transform-origin: top left;
   transform: rotate(30deg);
}

Nach dem Login kopieren

Sehen wir uns einige Beispiele für das Festlegen der Basisplatzierung eines gedrehten Elements in CSS an.

示例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>

Nach dem Login kopieren

Beispiel 2: Drehen eines Elements um seine rechte untere Ecke

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>

Nach dem Login kopieren

Beispiel 3: Rotierende Animation, die die Basisplatzierung des Elements ändert

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>

Nach dem Login kopieren

Fazit

在这里，我们讨论了如何使用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!