CSS에서 이미지를 육각형으로 설정하는 방법
- 藏色散人원래의
- 2021-02-28 14:43:304272검색
CSS에서 육각형 이미지를 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 이미지를 본문에 삽입합니다. 마지막으로 "transform:rotate(120deg);overflow:hidden;"과 같은 CSS 스타일을 사용합니다. 그게 다야.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS3는 육각형 Div 이미지 표시 효과를 구현합니다
1. 효과 그림
2. 원리 설명
이 효과에 사용되는 주요 지식 포인트:
1. 변환: 이미지 회전
2. 오버플로: 숨김 그 이상
3. 숨김: 숨김도 표시와 비슷하지만, 숨겨지더라도 여전히 웹페이지에서 위치를 차지한다는 차이점이 있습니다
이 효과를 얻으려면 회전하려면 p의 3개 레이어를 사용해야 합니다(참고: p의 3개 레이어 크기는 동일합니다). 가장 바깥쪽 레이어 p(boxF)는 120도 회전하고, 두 번째 레이어(boxS)는 -60도 회전하고, 세 번째 레이어(boxT)는 다시 -60도 회전하여 정상으로 돌아옵니다. 우리 사진은 레이어 3의 p 배경에 배치됩니다. 처음 두 레이어 p에는 아무것도 없기 때문에 육각형을 얻기 위해 회전하는 데만 사용되므로 가시성을 설정합니다. 첫 번째 및 두 번째 레이어 p에는 숨겨지고 세 번째 레이어 p는 그림용이므로 표시되어야 합니다. 가시성 설정: visible; (참고: 가시성: visible을 설정하지 않으면 세 번째 레이어 p에서 기본적으로 두 번째 레이어 p(boxS)의 가시성: 숨김을 상속합니다.) 회전 후에는 여분의 부분이 분명히 있으므로 세 PS 모두에 대해 Overflow:hidden;
을 설정합니다. 회전하고 여분의 부분을 숨긴 후에는 원하는 육각형을 얻을 수 있습니다. 주목해야 할 또 다른 점은 p의 너비 대 높이 비율이 4:5를 충족해야 한다는 것입니다. 그렇지 않으면 결과는 육각형이 아닙니다. 위의 효과 그림에서. 또한 세 번째 레이어(boxT)에 p(오버레이)를 배치했습니다. 이 p는 6면 모양 위로 마우스를 이동하면 마스킹 효과가 나타납니다. p(overlay) 내부에는 + 기호가 있는 a 태그가 있습니다. a 태그를 클릭하면 레이어가 팝업되고 큰 이미지가 표시됩니다(참고: 이 js 효과는 아직 작성되지 않았습니다).
3. 위 렌더링의 DEMO 코드 [권장: "css video tutorial"]
<!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>
-- 효과를 보려면 DEMO 코드를 복사하세요. 물론 사진을 직접 추가해야 합니다. , IE9 이하 버전에서는 지원되지 않습니다.
위 내용은 CSS에서 이미지를 육각형으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!