html>

CSS3 实现六边形图片展示效果

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;

}

.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;

}

Document

*{margin: 0;padding: 0;}

.clear{clear: both;}

body{background: #454545;}

.container{width: 650px;height: 430px;margin: 100px auto;}

.con-show01{width: 200px;height: 250px;float: left;margin-left: 10px;overflow: hidden;transform:rotate(120deg);}

.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);}

.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);position: relative;background: pink;}

.con-show03 > div{width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;line-height: 250px;text-align: center;color: #fff;cursor: pointer;background: url(../images/a.png);transition: opacity 0.3s;}

.con-show03:hover > div{opacity: 1;}

.margin-left{margin-left: 115px;}

.margin-top{margin-top: -70px;}