Maison >interface Web >tutoriel CSS >Comment définir l'image en hexagone en CSS
Comment définir l'image en hexagone en CSS
- 藏色散人original
- 2021-02-28 14:43:304238parcourir
Comment définir une image hexagonale en CSS : créez d'abord un exemple de fichier HTML ; puis introduisez l'image dans le corps ; enfin implémentez l'image via des styles CSS tels que "transform: rotate(120deg);overflow: Hidden ;" Soyez simplement hexagonal.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
CSS3 réalise un effet d'affichage d'image Div hexagonal
1. Image d'effet
2. >
Les principaux points de connaissances utilisés dans cet effet : 1. transformation : rotation (120deg); Rotation de l'image 2. débordement : caché au-delà du masquage 3. visibilité: caché; est également masqué, similaire à display:none;, mais la différence est que même s'il est masqué, il occupera toujours une position dans la page Web Nous devons utiliser 3 couches de p. Faites pivoter pour obtenir cet effet (remarque : la taille des 3 couches de p est la même). La couche la plus externe p (boxF) subit une rotation de 120 degrés, la deuxième couche (boxS) subit une rotation de -60 degrés et la troisième couche (boxT) subit une rotation supplémentaire de -60 degrés, ce qui revient tout simplement à la normale. Notre image est placée dans le fond p du calque 3. Parce qu'il n'y a rien dans les deux premiers calques p, ils sont uniquement utilisés pour tourner pour obtenir un hexagone, donc définissez la visibilité : cachée pour les 1er et 2ème calques p et le troisième calque p est pour les images et doit être affiché, donc ; définir la visibilité : visible ; (Remarque : si vous ne définissez pas la visibilité : visible ; sur le troisième calque p, il héritera de la visibilité : cachée ; du deuxième calque p(boxS) par défaut). Il y aura certainement des pièces en excès après la rotation, alors définissez overflow:hidden; pour les trois ps. Après la rotation et le masquage des pièces en excès, nous pouvons obtenir l'hexagone que nous voulons. Une autre chose à noter est que le rapport largeur/hauteur de p doit être égal à 4:5, sinon le résultat ne sera pas un hexagone. Dans l'image d'effet ci-dessus. Nous avons également placé un p (superposition) dans le troisième calque (boxT). Ce p est utilisé pour le masquage. Lorsque la souris passe sur la forme à 6 côtés, il y aura un effet de masquage. Il y a une balise a à l'intérieur de p(overlay) avec un signe + à l'intérieur. Cliquer sur la balise a fera apparaître le calque et affichera la grande image (Remarque : cet effet js n'a pas encore été écrit). 3. Code DEMO des rendus ci-dessus [Recommandé : "tutoriel vidéo CSS"]
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, p, img, ul, li {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
}
ul, ul li {
list-style: none;
}
.clear {
clear: both;
}
.box {
position: relative;
width: 630px;
margin: 100px auto;
}
.lineF, .lineS {
position: absolute;
visibility: hidden;
}
.lineS {
top: 182px;
left: 105px;
}
.boxF, .boxS, .boxT, .overlay {
width: 200px;
height: 250px;
overflow: hidden;
}
.boxF, .boxS {
visibility: hidden;
}
.boxF {
transform: rotate(120deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.boxS {
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT {
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
.overlay {
transition: all 250ms ease-in-out 0s;
display: none;
position: relative;
}
.overlay:hover {
background-color: rgba(0,0,0,0.6);
}
.boxT:hover .overlay {
display: block;
}
.overlay a {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin: -16px 0 0 -16px;
border-radius: 3px;
background-color: #d3b850;
text-align: center;
line-height: 32px;
width: 32px;
height: 32px;
text-decoration: none;
color: White;
font-size: 18px;
font-weight: bolder;
}
</style></head><body>
<p class="box">
<!--第一行(lineFirst)-->
<p class="lineF">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/1.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/2.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/3.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
<!--第二行(lineSecond)-->
<p class="lineS">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/4.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/5.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
</p></body></html> -- Si vous voulez voir l'effet, copiez simplement la DÉMO code directement. Bien sûr, vous devez ajouter l'image vous-même, et les versions inférieures à IE9 ne la prennent pas en charge. 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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment définir un triangle en CSSArticle suivant：Comment définir un triangle en CSS