CSS3 peut-il faire basculer les images ?-Questions et réponses frontales-php.cn

CSS3 peut-il faire basculer les images ?

WBOY

Libérer： 2022-04-28 16:18:49

original

2539 Les gens l'ont consulté

css3 peut incliner l'image ; vous pouvez utiliser l'attribut transform avec la méthode skew() pour incliner l'image. L'attribut transform vous permet d'incliner l'élément. La méthode skew() est utilisée pour définir la transformation d'inclinaison de l'élément. . La syntaxe est "élément d'image {transform:skew (angle de l'axe x, angle de l'axe y)}".

CSS3 peut-il faire basculer les images ?

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

Css3 peut-il faire incliner l'image ?

css3 peut faire incliner l'image

Utilisez simplement l'attribut transform et la méthode skew(). L'attribut

transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

skew signifie "inclinaison" et est une fonction intégrée en CSS qui doit être utilisée avec l'attribut transform pour la transformation inclinée des éléments.

La syntaxe est

skew(x-angle,y-angle)

Copier après la connexion

définit une transformation d'inclinaison 2D le long des axes X et Y.

Ou :

skewX(angle) définit une transformation d'inclinaison 2D le long de l'axe X.
skewY(angle) définit la transformation d'inclinaison 2D le long de l'axe Y.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  width:100px;
  height:100px;
  transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="CSS3 peut-il faire basculer les images ?" >
<img src="1118.02.png" alt="">
</body>
</html>

Copier après la connexion

Résultat de sortie :

CSS3 peut-il faire basculer les images ?