请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2573|回复: 0

纯css3实现图片三角形排列

[复制链接]
发表于 2016-6-28 21:59:03 | 显示全部楼层 |阅读模式
当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下:
201410152318191134.jpg
DIV:
<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/demo/2014-10-15-css3-image-view/index.html

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-28 19:57 , Processed in 0.066775 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表