Comment définir la position de base d'un élément pivoté en CSS ?-tutoriel CSS-php.cn

Comment définir la position de base d'un élément pivoté en CSS ?

WBOY

Libérer： 2023-08-27 14:21:07

avant

1396 Les gens l'ont consulté

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

CSS, ou Cascading Style Sheets, est un outil puissant qui fournit une gamme d'effets pour créer de belles pages Web dynamiques. L'un des outils les plus importants du CSS est la possibilité de faire pivoter les éléments. Les éléments rotatifs créent des designs et des animations uniques qui captent l'attention des utilisateurs et aident à communiquer le message. Ici, nous allons explorer comment définir le placement de base d'un élément pivoté en CSS.

CSS中的Transform属性

La propriété Transform permet d'appliquer diverses transformations aux éléments, notamment la rotation, la mise à l'échelle et l'inclinaison. Lorsqu'une transformation est appliquée à un élément, l'emplacement de base de l'élément change, ce qui rend difficile le positionnement correct de l'élément.

Rotate, scale, skew et translation sont des sous-propriétés de la propriété transform. Ici, nous nous concentrerons sur la sous-propriété pivotée. La propriété Rotate permet de faire pivoter un élément autour d'un point fixe sur la page.

在CSS中的元素旋转

Pour faire pivoter un élément en CSS, la propriété transform est utilisée avec la fonction rotate().

Syntaxe

<style>
   scc-selector{
      transform: rotate(angle);
   }
</style>

Copier après la connexion

在这里，"angle" 是以度为单位指定要应用于元素的旋转量。

Par exemple, le code suivant fera pivoter un élément de 30 degrés −

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

Copier après la connexion

La position de l'élément pivoté est ajustée en fonction de l'angle de rotation. Cela peut entraîner le déplacement de l'élément par rapport à sa position d'origine, ce qui peut être problématique pour le maintenir correctement.

CSS中可用的旋转变换类型

Les applications CSS sont basées sur rotation(), rotationX(), rotationY() et rotationZ().rotate() et rotationX() sur rotation, ainsi que rotationX(). et rotateY()围绕元素的水平和垂直轴旋转。rotateZ()函数围绕元素的z轴旋转，该轴垂直于屏幕。

设置旋转元素的基础位置的重要性

La position de base de l'élément pivoté détermine où il est ancré par rapport à son conteneur. Par défaut, le placement de base est défini au centre de l'élément. Cependant, le placement de base peut être ajusté à l'aide de la propriété transform-origin. Ceci est important car cela peut affecter la façon dont l'élément est positionné sur la page.
使用 transformation-origine 属性来调整旋转元素的基本位置
La propriété transform-origin peut être utilisée pour ajuster la position de base d'un élément pivoté. Cette propriété spécifie le point autour duquel un élément pivote. Par défaut, le placement de base est le centre de l'élément, ce qui signifie que l'élément pivote autour de son point central.
Pour ajuster le placement de base, nous pouvons définir la propriété transform-origin sur une valeur différente.

Le code suivant définira le placement de base dans le coin supérieur gauche de l'élément −

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

Copier après la connexion

Jetons un coup d'œil à quelques exemples de définition du placement de base d'un élément pivoté en CSS.

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

Copier après la connexion

Exemple 2 : Rotation d'un élément autour de son coin inférieur droit

Dans cet exemple, nous faisons pivoter le carré de 30 degrés à l'aide de la propriété transform, puis définissons la propriété transform-origin en bas à droite.

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

Copier après la connexion

Exemple 3 : Animation rotative qui modifie le placement de base de l'élément

Dans cet exemple, nous créons un carré avec une couleur de fond rouge dans un conteneur et définissons sa position initiale en utilisant position : valeurs absolues, supérieures et gauches. Nous définissons également sa largeur et sa hauteur sur 100 px, puis utilisons la propriété d'animation pour appliquer une animation d'image clé appelée rotation. Cette animation dure 2 secondes et se répète à l'infini.

最后，这个动画创建了一个旋转效果，其中元素的基本位置从中心变为左上角，然后变为右下角，最后又回到中心。

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

Copier après la connexion

Conclusion

在这里，我们讨论了如何使用CSS旋转元素。通过按照本文中给出的示例，我们可以确保旋转的元素在不同设备上的位置正确且一致。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!