Les images CSS peuvent-elles être pivotées ?-tutoriel CSS-php.cn

Les images CSS peuvent-elles être pivotées ?

藏色散人

Libérer： 2022-12-30 11:11:37

original

3906 Les gens l'ont consulté

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.

Les images CSS peuvent-elles être pivotées ?

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)

Copier après la connexion

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>

Copier après la connexion

Rendu :

Les images CSS peuvent-elles être pivotées ?