纯css3实现图片三角形排列_html/css_WEB-ITnose

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

在线预览   源码下载

实现的代码。

html代码:

 <div class='container'>        <div class='wrap'>            <div class='crop'>                <img  src='128.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='129.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='130.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='131.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='132.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='133.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='134.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </div>        </div>        <div class='wrap'>            <div class='crop'>                <img  src='135.jpg' alt="纯css3实现图片三角形排列_html/css_WEB-ITnose" >            </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;        }