纯js实现3d相册(复制粘贴就能运行)

小灰灰 2020-04-21 04:01 954阅读 0赞

# 纯JavaScript实现 旋转木马/3d相册特效(鼠标拖拽旋转)

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>蒲公英云</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

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

/* 场景景深 */
        #perspective {
            perspective: 700px;
        }

#wrap {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 150px auto;
            border: 1px solid black;
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(0deg); /*景深可以简写在此属性里*/
        }

#wrap img {
            position: absolute;
            width: 200px;
            transform: rotateX(0deg) rotateY(0deg);
            box-shadow: 0px 0px 1px #000000;
            /* 用box-shadow可以忽略层级问题 */
        }
    </style>
</head>
<body>
<div id="perspective">
    <div id="wrap">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
        <img src="http://dandelioncloud.cn/images/20170410095843.jpeg">
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        var oImg = document.getElementsByTagName('img'),
            oWrap = document.getElementById('wrap');
        var Deg = 360 / (oImg.length);
        Array.prototype.forEach.call(oImg, function (el, index) {
            el.style.transform = "rotateY(" + Deg * index + "deg)translateZ(350px)";
// el.style.zIndex = -index;
            el.style.transition = "transform 1s " + index * 0.1 + "s";
        });
        var nowX, nowY,//当前鼠标坐标
            lastX, lastY,//上一次鼠标坐标
            minusX, minusY,//距离差
            roX = -10, roY = 0;//总旋转度数
        window.onmousedown = function (ev) {
            var ev = ev;//获得事件源
            lastX = ev.clientX;
            lastY = ev.clientY;
            this.onmousemove = function (ev) {
                var ev = ev;//获得事件源
                nowX = ev.clientX;
                nowY = ev.clientY;//获得当前坐标
                minusX = nowX - lastX;
                minusY = nowY - lastY;//坐标差
                roY += minusX;//累计差值
                roX -= minusY;//累计差值
                oWrap.style.transform = "rotateX(" + roX + "deg)"
                    + "rotateY(" + roY + "deg)";
                lastX = nowX;
                lastY = nowY;//移动末期现坐标变为旧坐标
            }
            this.onmouseup = function () {
                this.onmousemove = null;//取消鼠标移动的影响
// this.onmousedown = null;
            }
        }
    }
</script>
</body>
</html>
```

**图片展示：**
![](/images/1587446214325.png)
![](/images/1587446240233.png)