• Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Do you have a cat? You want to make a photo wall for your cat owner

It starts as a group of photos that fold and merge, and then slowly spreads out around it into a circle that you can rotate your screen at any Angle with your mouse

Structure of the code

<div id="perspective">
        <! --wrap start-->
        <div id='wrap'>
            <img src="images/1.jpg" width="133" height="200" alt="#" />
            <img src="images/2.jpg" width="133" height="200" alt="#" />
            <img src="images/3.jpg" width="133" height="200" alt="#" />
            <img src="images/4.jpg" width="133" height="200" alt="#" />
            <img src="images/5.jpg" width="133" height="200" alt="#" />
            <img src="images/6.jpg" width="133" height="200" alt="#" />
            <img src="images/7.jpg" width="133" height="200" alt="#" />
            <img src="images/8.jpg" width="133" height="200" alt="#" />
            <img src="images/9.jpg" width="133" height="200" alt="#" />
            <img src="images/10.jpg" width="133" height="200" alt="#" />
            <img src="images/11.jpg" width="133" height="200" alt="#" />
            <p></p>
        </div>
        <! --wrap end-->
    </div>
Copy the code

Style code

* {
    margin: 0;
    padding: 0;
}

body {
    background: # 222;
    overflow: hidden;
}

#perspective {
    perspective: 800px;
}

#wrap {
    width: 120px;
    133-200 / * * /
    height: 180px;
    margin: 0 auto;
    position: relative;
    /* Two attributes are required to build the 3D effect: a transform style to 3D and a scene depth of 800px*/
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg);
}

#wrap img {
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 8px # 000000;
    transform: rotateY(0deg) translateZ(0px);
    /* Reflection: orientation offset to cover */
    /* Linear gradient (where to start, start color, end color)*/
    -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0.0.0.0) 40%.rgba(0.0.0.0.5) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#wrap p {
    width: 1200px;
    height: 1200px;
    background: -webkit-radial-gradient(center center, 600px 600px.rgba(122.122.124.0.2), rgba(0.0.0.0));
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 102%;
    margin-left: -600px;
    margin-top: -600px;
    transform: rotateX(90deg);
}


Copy the code

Performance of code

window.onload = function() {
    var oWrap = document.getElementById('wrap');
    var oImg = oWrap.getElementsByTagName('img');
    var oImgLength = oImg.length;
    var Deg = 360 / oImgLength;
    var nowX, nowY, lastX, lastY, minusX = 0,
        minusY = 0;
    var roY = 0,
        roX = -10;
    var timer;
    for (var i = 0; i < oImgLength; i++) {
        oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
        oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

    }
    mTop();
    window.onresize = mTop;

    function mTop() {
        var wH = document.documentElement.clientHeight;
        oWrap.style.marginTop = wH / 2 - 180 + 'px';
    }
    // Drag: three events - press move lift
    / / press
    document.onmousedown = function(ev) {
        ev = ev || window.event;
        // Assign a value to the previous point when the mouse is pressed, in order to avoid the error of the first subtraction
        lastX = ev.clientX;
        lastY = ev.clientY;
        / / move
        this.onmousemove = function(ev) {
                ev = ev || window.event;
                clearInterval(timer);
                nowX = ev.clientX; // clientX the distance from the mouse to the left of the page
                nowY = ev.clientY; / / clientY............................................................... At the top of the...........................
                // The difference between the current coordinate and the previous coordinate
                minusX = nowX - lastX;
                minusY = nowY - lastY;
                // Update wrap rotation Angle, faster drag -> minus changes -> roY changes -> rotates faster
                roY += minusX * 0.2; // roY = roY + minusX*0.2;
                roX -= minusY * 0.1;
                oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
                // The coordinates of the previous point
                lastX = nowX;
                lastY = nowY;
            }
            / / lift
        this.onmouseup = function() {
            this.onmousemove = null;
            timer = setInterval(function() {
                minusX *= 0.95;
                minusY *= 0.95;
                roY += minusX * 0.2; // roY = roY + minusX*0.2;
                roX -= minusY * 0.1;
                oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
                if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) { clearInterval(timer); }},13);
        }
        return false; }}Copy the code

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤

🍅 author home page: front-end honest man -> 🍅 home page to obtain the source code contact 🍅