Maison > Article > interface Web > Les images CSS peuvent-elles être pivotées ?
Les images CSS peuvent-elles être pivotées ?
- 藏色散人original
- 2021-01-12 10:38:563911parcourir
Les images CSS peuvent être pivotées ; en CSS, vous pouvez utiliser l'attribut transform et définir la valeur sur "rotate(angle)", "rotate3d(x,y,z,angle)", "rotateX(angle) )" ou "rotateY(angle)" et ainsi de suite peuvent être utilisés pour faire pivoter l'image.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Recommandé : Tutoriel vidéo CSS
L'attribut transform s'applique à la transformation 2D ou 3D de l'élément. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc. l'élément.
Syntaxe :
transform: rotate(angle)|rotate3d(x,y,z,angle)|rotateX(angle)|rotateY(angle)|rotateZ(angle)
rotate(angle) : Définissez la rotation 2D, précisez l'angle dans les paramètres.
rotate3d(x,y,z,angle) : définit la rotation 3D.
rotateX(angle) : Définit une rotation 3D le long de l'axe X.
rotateY(angle) : Définit une rotation 3D le long de l'axe Y.
rotateZ(angle) : Définit une rotation 3D le long de l'axe Z.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="pulpitrock.jpg" alt="" width="284" style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284" style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>
</body>
</html>Rendu :
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!