今天小编跟大家讲解下有关布局和排版教程 纯css3实现图片三角形排列 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关布局和排版教程 纯css3实现图片三角形排列 的相关资料，希望小伙伴们看了有所帮助。
当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下：
实现的代码可以有两种：html代码和css3代码 具体如下
html代码:
复制代码代码如下: <div class='container'> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/128.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/129.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/130.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/131.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/132.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/133.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/134.jpg'> </div> </div> <div class='wrap'> <div class='crop'> <img src='https://www.aidi.net.cn//css/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; }
来源：爱蒂网
