レンダリング:
実装原理:
この効果の主な CSS スタイルは次のとおりです:
1.>transform:rotate(120deg); 画像の回転
2.>overフロー:非表示;非表示を超えて
3.>visibility: hidden; も、display:none; と似ていますが、違いは、非表示であっても、Web ページ内の位置を占めることです
3 レイヤー この効果を得るために div が回転されます (追記: 3 レイヤーの div のサイズは同じです)。
一番外側の div (boxF) が 120 度回転されます。 2 番目のレイヤー (boxS) は -60 度回転され、3 番目のレイヤー (boxT) は再び -60 度回転され、通常の状態に戻ります。画像は 3 番目のレイヤーの div 背景に配置されます。 div の最初の 2 つのレイヤーには何もないため、純粋に六角形を取得するために回転するために使用されるため、可視性を設定します。1 番目と 2 番目のレイヤーの div は非表示に、3 番目のレイヤーの div は写真用です。を表示する必要があるため、visibility:visible; を設定します (追記: 3 番目のレイヤー div で Visibility:visible; を設定しない場合、デフォルトで 2 番目のレイヤー div (boxS) の Visibility:hidden; が継承されます)。回転後は必ず余分な部分があるので、3 つの div 全てに overflow:hidden;
を設定します。回転して余分な部分を非表示にすると、目的の六角形が得られます。もう 1 つ注意すべき点は、div の幅と高さが等しくないことです。等しくない場合、結果は六角形になりません。上の効果画像の
。また、3 番目のレイヤー (boxT) に div (オーバーレイ) を配置しました。この div は、6 辺の形状の上にマウスを移動すると、マスキング効果が生じます。 div (オーバーレイ) 内に + 記号が付いた a タグがあります。 a タグをクリックするとレイヤーがポップアップし、大きな画像が表示されます (追記: この JS エフェクトはまだ書かれていません)
デモ コード上記のレンダリングの例を以下に示します。
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 实现六边形图片展示效果</title> <style type="text/css"> body, div, 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> <div class="box"> <!--第一行(lineFirst)--> <div class="lineF"> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(img/1.jpg);"> <div class="overlay"> <a href="#">+</a> </div> </div> </div> </div> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(img/2.jpg);"> <div class="overlay"> <a href="#">+</a> </div> </div> </div> </div> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(img/3.jpg);"> <div class="overlay"> <a href="#">+</a> </div> </div> </div> </div> </div> <!--第二行(lineSecond)--> <div class="lineS"> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(img/4.jpg);"> <div class="overlay"> <a href="#">+</a> </div> </div> </div> </div> <div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(img/5.jpg);"> <div class="overlay"> <a href="#">+</a> </div> </div> </div> </div> </div> </div></body></html>効果を確認したい場合は、デモ コードを直接コピーしてください。 IE9 より前のバージョンはサポートされていません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
