前端特效之520表白神器-旋转照片墙

520马上到了，教大家一手表白神器，单身的程序员们感觉学起来，很简单。

制作步骤：

1. 新建代码目录，新建文件index.html，将以下代码拷贝到文件中

2. 新建文件夹image，找12张图片放进去，修改imgae标签对应的src属性，酷炫的照片旋转就完成了。

3. 代码效果如下，双击index.html或者直接拖到浏览器中打开即可

Drimo

专注服务影视、广告行业的AI创作平台

下载

    
    
    
        *{
            padding:0;
            margin:0;
        }
        #react{
            width: 200px;
            height:200px;
            margin: 200px auto;
            transform-style:preserve-3d;
            animation:rotate 20s infinite;
            animation-timing-function: linear;
        }
        #react div{
            position:absolute;
            transition: all .4s;
        }
        div .out_pic{
            width:200px;
            height:200px;
            opacity:0.9;
        }
        div .in_pic{
            width:100px;
            height:100px;
        }
        #react span{
            display:block;
            position:absolute;
            width:100px;
            height:100px;
            top:50px;
            left:50px;
        }
        @keyframes rotate{
            from{transform: rotateX(0deg) rotateY(0deg);}
            to{transform: rotateX(360deg) rotateY(360deg);}
        }
        .out_frount{
            transform:translateZ(100px);
        }
        .out_back{
            transform:translateZ(-100px);
        }
        .out_left{
            transform:rotateY(90deg) translateZ(100px);
        }
        .out_right{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .out_top{
            transform:rotateX(90deg) translateZ(100px);
        }
        .out_bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
        .in_frount{
            transform:translateZ(50px);
        }
        .in_back{
            transform:translateZ(-50px);
        }
        .in_left{
            transform:rotateY(90deg) translateZ(50px);
        }
        .in_right{
            transform: rotateY(-90deg) translateZ(50px);
        }
        .in_top{
            transform:rotateX(90deg) translateZ(50px);
        }
        .in_bottom{
            transform: rotateX(-90deg) translateZ(50px);
        }
        #react:hover .out_frount{
            transform:translateZ(200px);
        }
        #react:hover .out_back{
            transform:translateZ(-200px);
        }
        #react:hover .out_left{
            transform:rotateY(90deg) translateZ(200px);
        }
        #react:hover .out_right{
            transform: rotateY(-90deg) translateZ(200px);
        }
        #react:hover .out_top{
            transform:rotateX(90deg) translateZ(200px);
        }
        #react:hover .out_bottom{
            transform: rotateX(-90deg) translateZ(200px);
        }
        @charset "utf-8";
        /* CSS Document */
    




    

        
    
    

        
    
    

        
    
    

        
    
    

        
    
    

        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    

摆脱单身就差这一步了，赶紧学起来，记得回来关注哦！