Comment définir la rotation au point central de rotation en CSS3-Questions et réponses frontales-php.cn

Comment définir la rotation au point central de rotation en CSS3

WBOY

Libérer： 2022-04-24 10:50:22

original

8943 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut "transform-origin" pour définir le point central de rotation de la rotation. Cet attribut peut modifier la position de l'élément transformé. Le premier paramètre définit la position de rotation de l'axe x, et le. le deuxième paramètre définit la position de rotation de l'axe y, la syntaxe est "transform-origin:x-axis position y-axis position".

Comment définir la rotation au point central de rotation en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir le point central de rotation de rotation en CSS3

La fonction rotate() est une fonction intégrée qui est utilisée pour faire pivoter des éléments en fonction d'un angle donné en tant que paramètre. L'angle peut être réglé en degrés, ticks, radians ou tours.

Utilisation :

rotate( angle )

Copier après la connexion

Paramètres : Cette fonction accepte un seul paramètre angle représentant l'angle de rotation. Les angles positifs et négatifs font tourner l'élément respectivement dans le sens des aiguilles d'une montre et dans le sens inverse.

L'exemple suivant illustre la fonction rotate() en CSS :

Exemple 1 :

<!DOCTYPE html>  
<html>  
<head>  
    <title>CSS rotate() function</title>  
    <style>  
        body { 
            text-align:center; 
        } 
        h1 { 
            color:green; 
        } 
        .rotate_image { 
            transform:rotate(45deg); 
        } 
    </style>  
</head>  
  
<body>  
    <h1>GeeksforGeeks</h1> 
    <h2>CSS rotate() function</h2> 
    <br><br> 
      
    <img class="rotate_image" src=  
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">  
</body>  
</html>

Copier après la connexion

Sortie :

Comment définir la rotation au point central de rotation en CSS3

L'attribut transform-Origin permet de changer la position de l'élément transformé.

L'élément de transformation 2D peut modifier les axes X et Y de l'élément. Transformez les éléments en 3D et modifiez également l'axe Z de l'élément.

La syntaxe est la suivante :

transform-origin: x-axis y-axis z-axis;

Copier après la connexion

x-axis définit l'endroit où la vue est placée sur l'axe X.

l'axe Y définit l'endroit où la vue est placée sur l'axe Y.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
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 and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment définir la rotation au point central de rotation en CSS3