Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (test réel du code) ?-tutoriel CSS-php.cn

Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (test réel du code) ?

藏色散人

Libérer： 2018-08-09 16:45:10

original

11048 Les gens l'ont consulté

Si des images en trois dimensions apparaissent sur une page Web, cela donnera toujours aux gens une impression de haute technologie. En fait, il n'est pas difficile de concevoir un effet tridimensionnel. Nous pouvons obtenir l'effet tridimensionnel grâce au CSS. C'est très simple et facile à comprendre. Tout d'abord, nous pouvons avoir cette idée simple. Afin de mettre en valeur l'effet tridimensionnel, nous devons rendre l'ombre lourde à gauche et à droite et claire au milieu, ce qui est le cas. l'effet tridimensionnel d'ombre CSS. Ici, nous utilisons les pseudo-éléments ::before,::after pour créer et laisser Ils sont positionnés derrière l'élément #Demo (z-index:-1), définir une ombre et définir la rotation. . Cet article vous donnera une introduction détaillée à la mise en œuvre de l'effet tridimensionnel des images CSS.

L'exemple de code spécifique pour l'effet tridimensionnel d'image CSS est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css立体感测试</title>
    <style>
        #demo{ display:inline-block; position:relative; margin:50px; padding:20px; background:#fafafa; box-shadow:0 0 3px rgba(0, 0, 0, 0.2); -moz-border-radius:4px; border-radius:4px; color:rgba(0,0,0, 0.8); text-shadow:0 1px 0 #fff;}
        #demo::before, #demo::after{ position:absolute; content:""; top:10px; bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); -ms-transform:rotate(-3deg); transform:rotate(-3deg); z-index:-1;}
        #demo::after{ right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); -ms-transform:rotate(3deg); transform: rotate(3deg);}
        #demo img{ vertical-align:bottom;}
    </style>
</head>
<body>
<div id="demo">
    <img  src="1.png"    style="max-width:90%"  style="max-width:90%" / alt="Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (test réel du code) ?" >
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (test réel du code) ?

Notes sur les attributs associés :

1. box-shadow

box-shadow : 5px 2px 6px #000;
Valeurs de gauche à droite : valeur de décalage du niveau d'ombre (la valeur positive va vers la droite, la valeur négative va vers la gauche) ; la valeur de décalage vertical de l'ombre (la valeur positive descend, la valeur négative monte la valeur de flou d'ombre) ; .

2. transformation
La transformation a de nombreux effets, ici seule la rotation est utilisée :

transformation : rotation(-3deg)
La valeur numérique représente la angle de rotation, une valeur positive signifie dans le sens des aiguilles d'une montre, une valeur négative signifie dans le sens inverse des aiguilles d'une montre.

J'espère que cette introduction à l'effet tridimensionnel des images CSS sera utile à tout le monde !

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!