布局和排版教程 纯css3实现图片三角形排列


Posted in HTML / CSS onOctober 17, 2014

当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下:

布局和排版教程 纯css3实现图片三角形排列

实现的代码可以有两种:html代码和css3代码,具体如下

html代码:

复制代码
代码如下:

<div class='container'>
<div class='wrap'>
<div class='crop'>
<img src='128.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='129.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='130.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='131.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='132.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='133.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='134.jpg'>
</div>
</div>
<div class='wrap'>
<div class='crop'>
<img src='135.jpg'>
</div>
</div>
</div>

css3代码:

复制代码
代码如下:
body
{
background: #f1f1fa;
}

.container
{
margin: 140px auto 0;
font-size: 0;
max-width: 560px;
}

.wrap
{
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
-o-transform: rotate(45deg) translate3d(0, 0, 0);
transform: rotate(45deg) translate3d(0, 0, 0);
display: inline-block;
-webkit-transition: -webkit-transform 300ms ease-out;
-moz-transition: -moz-transform 300ms ease-out;
transition: transform 300ms ease-out;
width: 100px;
}
.wrap:hover
{
-webkit-transition: -webkit-transform 700ms ease-out;
-moz-transition: -moz-transform 700ms ease-out;
transition: transform 700ms ease-out;
-webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
-moz-transform: rotate(45deg) translate3d(10px, 10px, 0);
-ms-transform: rotate(45deg) translate3d(10px, 10px, 0);
-o-transform: rotate(45deg) translate3d(10px, 10px, 0);
transform: rotate(45deg) translate3d(10px, 10px, 0);
}
.wrap:nth-child(even)
{
width: 40px;
-webkit-transform: rotate(225deg) translate3d(30px, 120px, 0);
-moz-transform: rotate(225deg) translate3d(30px, 120px, 0);
-ms-transform: rotate(225deg) translate3d(30px, 120px, 0);
-o-transform: rotate(225deg) translate3d(30px, 120px, 0);
transform: rotate(225deg) translate3d(30px, 120px, 0);
}
.wrap:nth-child(even) .crop img
{
-webkit-transform: skew(-20deg, -20deg) rotate(-225deg);
-moz-transform: skew(-20deg, -20deg) rotate(-225deg);
-ms-transform: skew(-20deg, -20deg) rotate(-225deg);
-o-transform: skew(-20deg, -20deg) rotate(-225deg);
transform: skew(-20deg, -20deg) rotate(-225deg);
}
.wrap:nth-child(even):hover
{
-webkit-transform: rotate(225deg) translate3d(40px, 130px, 0);
-moz-transform: rotate(225deg) translate3d(40px, 130px, 0);
-ms-transform: rotate(225deg) translate3d(40px, 130px, 0);
-o-transform: rotate(225deg) translate3d(40px, 130px, 0);
transform: rotate(225deg) translate3d(40px, 130px, 0);
}

.crop
{
position: relative;
width: 160px;
height: 160px;
margin: 0;
display: block;
overflow: hidden;
-webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-o-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
transform: skew(20deg, 20deg) translate3d(0, 0, 0);
}
.crop img
{
width: 160px;
height: 160px;
position: absolute;
left: -50%;
margin-top: 36px;
margin-left: 36px;
top: -50%;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
-o-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
opacity: 0.7;
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
.crop img:hover
{
opacity: 1;
}

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
You might like
php 定界符格式引起的错误
2011/05/24 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
JsChart组件使用详解
2018/03/04 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python 6行代码制作月历生成器
2020/09/18 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
室内拓展活动方案
2014/02/13 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
研究生导师评语
2014/12/31 职场文书
召开会议通知范文
2015/04/15 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js