Front-end special effects 520 confession artifact-rotating photo wall-CSS Knowledge-php.cn

Front-end special effects 520 confession artifact-rotating photo wall

安安杰尼

Release： 2020-04-29 10:50:40

Original

196110 people have browsed it

520 is coming soon, and I will teach you how to use the white magic tool. Single programmers feel that it is very easy to learn.

Production steps:

1. Create a new code directory, create a new file index.html, and copy the following code into the file

2. Create a new file Clip image, find 12 pictures and put them in, modify the src attribute corresponding to the imgae tag, and the cool photo rotation is completed.

3. The code effect is as follows, double-click index.html or drag it directly to the browser to open it

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>520表白神器-照片特效</title>
    <style>
        *{
            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 */
    </style>
</head>

<body>
<div id="react">
    <div class="out_frount">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_back">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_left">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_right">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_top">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_bottom">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <span class="in_frount">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_back">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_left">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_right">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_top">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
        <image src="image/1.jpg" class="in_pic">
    </span>
</div>
</body>
</html>

Copy after login

Front-end special effects 520 confession artifact-rotating photo wall

This is the only step to get rid of being single. Hurry up and learn, and remember to come back and follow us!

The above is the detailed content of Front-end special effects 520 confession artifact-rotating photo wall. For more information, please follow other related articles on the PHP Chinese website!