布局和排版教程 纯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 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python+opencv实现动态物体追踪
2018/01/09 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
几道PHP面试题
2013/04/14 面试题
职工小家建设活动方案
2014/08/25 职场文书
学习退步检讨书
2014/09/28 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
历史博物馆观后感
2015/06/05 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
解析python中的jsonpath 提取器
2022/01/18 Python