css3特效-3D动态照片墙

效果展示

源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                background: #b8e6b3;
                transition: background-color .8s
            }
            
            #content {
                width: 1190px;
                margin: 100px auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                transform-style: preserve-3d;
                transform: perspective(1200px) rotateX(0deg) rotateY(0deg)
            }
            
            .box {
                width: 150px;
                height: 150px;
                position: relative;
                margin: 12px 0;
                transition: .3s;
                transform-style: preserve-3d;
                transform: perspective(1200px) rotateX(0deg) rotateY(0deg)
            }
            
            .box div {
                width: 150px;
                height: 150px;
                text-align: center;
                color: #fff;
                position: absolute;
                left: 0;
                top: 0;
                border: 10px solid #fff;
                box-sizing: border-box;
                overflow: hidden
            }
            
            .box:nth-child(1n) div {
                background: #f0f0f0 url(1.png) no-repeat center
            }
            
            .box:nth-child(2n) div {
                background: #f0f0f0 url(2.png) no-repeat center
            }
            
            .box:nth-child(3n) div {
                background: #f0f0f0 url(3.png) no-repeat center
            }
            
            .box div:nth-of-type(1) {
                transform: translateZ(75px)
            }
            
            .box div:nth-of-type(2) {
                transform: translateZ(-75px)
            }
            
            .box div:nth-of-type(3) {
                transform: translateY(75px) rotateX(-90deg)
            }
            
            .box div:nth-of-type(4) {
                transform: translateY(-75px) rotateX(90deg)
            }
            
            .box div:nth-of-type(5) {
                transform: translateX(75px) rotateY(90deg)
            }
            
            .box div:nth-of-type(6) {
                transform: translateX(-75px) rotateY(90deg)
            }
            
            .box span {
                display: block;
                width: 70px;
                height: 70px;
                position: absolute;
                right: -35px;
                bottom: -35px;
                border-radius: 50%;
                text-indent: 9%;
                line-height: 45px;
                text-align: left;
                font-size: 18px;
                font-family: "微软雅黑"
            }
            
            .box:nth-child(1n) span {
                background: #f8af8d
            }
            
            .box:nth-child(2n) span {
                background: #f8d18d
            }
            
            .box:nth-child(3n) span {
                background: #8df88d
            }       </style>
        <script
            >window.onload = function() {
    eval(function(p, a, c, k, e, d) {
        e = function(c) {
            return(c < a ? "" : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
        };
        if(!''.replace(/^/, String)) {
            while(c--) d[e(c)] = k[c] || e(c);
            k = [function(e) {
                return d[e]
            }];
            e = function() {
                return '\\w+'
            };
            c = 1;
        };
        while(c--)
            if(k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
        return p;
    }('2 h=4.F("h");2 6=4.H(".L");2 b=[\'f(8)\',\'f(-8)\',\'g(8)\',\'g(-8)\'];2 a=[\'#z\',\'#D\',\'#M\',\'#C\',\'#A\',\'#B\',\'#j\',\'#l\',\'#q\',\'#J\',\'#z\',\'#D\',\'#C\',\'#A\',\'#B\',\'#j\',\'#l\',\'#q\',\'#I\',\'#K\'];G(2 i=0;i<6.d;i++){6[i].E=c(9){2 s=b[7.o(7.p()*(b.d-1))];r.3.e=\'u(w) V(U) \'+s;4.n.3.k=a[7.o(7.p()*(a.d-1))]};6[i].W=c(){r.3.e=\'\';4.n.3.k=\'X(Y,P,O)\'}}4.N=c(9){2 x=(0.5-9.Q/t.T)*v;2 y=(9.S/t.R-0.5)*v;h.3.e=\'u(w) f(\'+x+\'m) g(\'+y+\'m)\'};', 61, 61, '||var|style|document||divs|Math|180deg|ev|colors|rot|function|length|transform|rotateX|rotateY|content||EEDECD|background|B8E6B3|deg|body|round|random|ABE3D8|this|css|window|perspective|15|1200px|||F7E8ED|DDF4DE|F0F1D5|E0ECF5|F2D9E6|onmouseenter|getElementById|for|querySelectorAll|DFD1F0|E0E1F5|6161616|box|ECC6DE|onmousemove|179|230|clientY|innerWidth|clientX|innerHeight|150px|translateZ|onmouseleave|rgb|184'.split('|'), 0, {}))

};
        </script>
    </head>
    <body>
        <div id="content">
            <div class="box">
                <div><span>1</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>2</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>3</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>4</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>5</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>6</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>7</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>8</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>9</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>10</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>11</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>12</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>13</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>14</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>15</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>16</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>17</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>18</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>19</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>20</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>21</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>22</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>23</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>24</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>25</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>26</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>27</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div><span>28</span></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • 本特效由H5+CSS3+JS携手打造,3D场景照片墙,环形,倒影,可拖动打造良好的视觉效果和用户体验。主要使用tr...
    吖蛋黄阅读 1,748评论 1 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,825评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 小时候,在我小姨妈(我妈的堂妹)的婚宴上,我大舅(我妈亲哥)做主厨,做了一道银耳莲子羹,令我印象特别深刻。那碗银耳...
    Miss童阅读 838评论 6 9
  • 今天周一,感受到特累,连续几天都不想吃晚饭,一回来就躺倒想要睡觉,身体一直都感受到疲惫,一直都想要休息,休息,其他...
    高藝菲Sophia阅读 191评论 0 0