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="data:images/aa.jpg"><div>123</div></div></div></div><div class="con-show01"><div class="con-show02"><div class="con-show03 bg02"><img src="data:images/a1.jpg"><div>123</div></div></div></div><div class="con-show01"><div class="con-show02"><div class="con-show03 bg03"><img src="data: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="data: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="data: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

css3实现六边形照片展示相关推荐

CSS3 实现六边形图片展示效果
代码片下面展示一些内联代码片. // html <div class="boxF"><div class="boxS"><di ...
css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...
CSS3 实现六边形Div图片展示效果
二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibility: h ...
图片照片展示html5模板
简介: 图片照片展示html5模板网盘下载地址: http://kekewangLuo.cc/GPDLk5RCWJO0 图片:
html怎么做一个动态广告图,用CSS3实现广告的展示动画特效
用CSS3实现广告的展示动画特效,不需要用JS哦,大家可以学习下,很多地方都可以用到,还在等什么呢,代码奉上啦! 展示图: DEMO代码:html> 用CSS3实现广告的展示动画特效 - Web ...
html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果
某些时候你可能需要让图片四周带有边缘模糊效果,那么除了PS之外有没有简单的代码实现方法呢?今天我们就使用CSS3的新特性实现图片边缘的模糊效果,首先你需要在图片标签外部套一层DIV标签,其次再为外层D ...
PR模板使用教程线性擦除图片照片展示特效PR模板使用细节教程
PR模板使用教程关于线性擦除图片照片展示特效Premiere模板使用中的细节教程讲解先看更改后的效果,如下图所示调整方式,点击轨道上框选的素材,在效果控件里,选择缩放比例(取消等比缩放的&quo ...
css3 卡片亮光_9种纯CSS3人物信息卡片动态展示效果
通常在一些网站的网页上需要展示人物的个人信息,人物信息卡片是其中的一种展示方式,所以这一次给大家带来<9种纯CSS3人物信息卡片动态展示效果>.先上页面截图: 源代码下载: 9种纯CSS3 ...
jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库
jquery 堆栈溢出 View demo 查看演示Download Source 下载源 In this tutorial we are going to create a nice and fre ...

css3实现六边形照片展示

css3实现六边形照片展示相关推荐

最新文章

热门文章