css3实现六边形照片展示

总是在匆忙中不知所措，总是还未做好准备，所有的事情就已经发生。对于大多数人努力程度之低，所以根本就不用拼天赋。每天学习一点点。

今天实现的是，用css3去实现多边形的照片显示。其核心是利用css3中的旋转，transform:rotate(xdeg)，以及溢出隐藏overflow:hidden。代码很简单先看看这个效果模样。最后又源代码下载，供和我一样的菜鸟学习交流。

html代码。

<section class="container">   
      <div class="con-show01">
        <div class="con-show02">
          <div class="con-show03 bg01">
            <img src="images/aa.jpg">
            <div>123</div>
          </div>
        </div>
      </div>
      <div class="con-show01">
        <div class="con-show02">
          <div class="con-show03 bg02">
            <img src="images/a1.jpg">
            <div>123</div>
          </div>
        </div>
      </div>

      <div class="con-show01">
        <div class="con-show02">
          <div class="con-show03 bg03">
            <img src="images/a2.jpg">
            <div>123</div>
          </div>
        </div>
      </div>

      <div class="clear"></div>

      <div class="con-show01 margin-left margin-top">
        <div class="con-show02">
          <div class="con-show03 bg04">
            <img src="images/a4.jpg">
            <div>123</div>
          </div>
        </div>
      </div>

      <div class="con-show01 margin-top">
        <div class="con-show02">
          <div class="con-show03">
            <img src="images/a5.jpg">
            <div>123</div>
          </div>
        </div>
      </div>           
    </section>

css:

*{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;}

下载地址： http://download.csdn.net/download/u014703834/8365129