Maison >interface Web >Questions et réponses frontales >CSS3 peut-il faire basculer les images ?
CSS3 peut-il faire basculer les images ?
- WBOYoriginal
- 2022-04-28 16:18:492574parcourir
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)}".
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)
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>Résultat de sortie :
(Partage vidéo d'apprentissage : Tutoriel vidéo 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!