純css3實現圖片三角形排列

標籤：style   blog   http   color   io   os   ar   for   sp   

當今是個讀圖時代。純大部分網頁或多或少都會用到圖片。特別是圖片較多的網頁。圖片的布局和排版就非常重要了。今天要給大寫帶來一款純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;        }

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/8500

純css3實現圖片三角形排列