布局和排版教程 纯css3实现图片三角形排列_ Div+Css教程-查字典教程网
布局和排版教程 纯css3实现图片三角形排列
布局和排版教程 纯css3实现图片三角形排列
发布时间:2017-01-07 来源:查字典编辑
摘要:当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图...

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

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

html代码:

<div>

<div>

<div>

<img src='128.jpg'>

</div>

</div>

<div>

<div>

<img src='129.jpg'>

</div>

</div>

<div>

<div>

<img src='130.jpg'>

</div>

</div>

<div>

<div>

<img src='131.jpg'>

</div>

</div>

<div>

<div>

<img src='132.jpg'>

</div>

</div>

<div>

<div>

<img src='133.jpg'>

</div>

</div>

<div>

<div>

<img src='134.jpg'>

</div>

</div>

<div>

<div>

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

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类