CSS3 implements hexagonal Div image display effect_html/css

CSS3 implements hexagonal Div image display effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:55:07

Original

1253 people have browsed it

Rendering:

Implementation principle:

The main css styles for this effect are:

1.>transform: rotate(120deg); Image rotation

2.>overflow:hidden; beyond hiding

3.>visibility: hidden; is also hidden, and display:none; is similar, but the difference is that although it is hidden, it will still occupy a position in the web page

We need to use 3 layers of divs to rotate to get this effect ( ps: The sizes of the three layers of divs are the same).

The outermost div (boxF) is rotated 120 degrees. The second layer (boxS) is rotated -60 degrees, and the third layer (boxT) is rotated -60 degrees again, and is now back to normal. Our picture is placed in the div background of the third layer. Because there is nothing in the first two layers of divs, they are purely used to rotate to get a hexagonal shape, so set visibility: hidden for the divs on the 1st and 2nd layers; and the div on the third layer is for pictures and needs to be displayed, so set visibility: visible; (ps: If you do not set visibility: visible; on the third layer div, it will inherit the visibility: hidden; of the second layer div (boxS) by default). There will definitely be excess parts after rotation, so set overflow:hidden;

for all three divs. After rotation and hiding the excess parts, we can get the 6-sided shape we want. Another thing to note is that the width and height of the div should not be equal, otherwise the result will not be a hexagon.

in the effect picture above. I also placed a div (overlay) in the third layer (boxT). This div is used for masking. When the mouse moves over the 6-sided shape, there will be a masking effect. There is an a tag inside the div (overlay) with a number inside. Click the a tag to pop up the layer and display the large image (ps: This js effect has not been written yet)

As given below DEMO code of the above rendering:

<!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>

Copy after login

If you want to see the effect, just copy the DEMO code directly. Versions below IE9 are not supported.