這篇文章主要講解了“怎么用css3實(shí)現(xiàn)圖片三角形排列”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用css3實(shí)現(xiàn)圖片三角形排列”吧！

創(chuàng)新互聯(lián)專注于鄱陽(yáng)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站開發(fā)。鄱陽(yáng)網(wǎng)站建設(shè)公司,為鄱陽(yáng)等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

當(dāng)今是個(gè)讀圖時(shí)代。純大部分網(wǎng)頁(yè)或多或少都會(huì)用到圖片。特別是圖片較多的網(wǎng)頁(yè)。圖片的布局和排版就非常重要了。今天要給大寫帶來(lái)一款純css3實(shí)現(xiàn)圖片三角形排列。適合一系列的圖片。效果圖如下：

實(shí)現(xiàn)的代碼可以有兩種：html代碼和css3代碼，具體如下

html代碼:

代碼如下:

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

感謝各位的閱讀，以上就是“怎么用css3實(shí)現(xiàn)圖片三角形排列”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用css3實(shí)現(xiàn)圖片三角形排列這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站標(biāo)題：怎么用css3實(shí)現(xiàn)圖片三角形排列-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/jeesj.html