3D图像展示

最新推荐文章于 2024-04-28 21:42:52 发布

灬么么哒LSQ

最新推荐文章于 2024-04-28 21:42:52 发布

阅读量486

点赞数

分类专栏： 3D相册文章标签： 3D图像

本文链接：https://blog.csdn.net/qq_35106189/article/details/86595604

版权

3D相册专栏收录该内容

1 篇文章 0 订阅

订阅专栏

欢迎各个领域的程序员不管是学生还是上班了的还是小白加入讨论交流群，大家一起讨论交流学习951701316，有内推工作的也会优先群里的朋友，群号951701316

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3+3D相册-jq22.com</title>
    <style>
        * {
            margin:0;
            padding:0;
            font-size:0;
        }
        html,body {
            width:100%;
            height:100%;
            display:flex;
            /*display:-webkit-flex;*/
            background:-webkit-radial-gradient(#490338 10%,#000);
            /*perspective:900px;*/
            /*-webkit-perspective: 900px;*/
            overflow:hidden;
        }
        #album {
            width:133px;
            height:200px;
            margin:auto;
            position:relative;
            transform-style:preserve-3d;
            transform:rotateX(-20deg);
        }
        #album img {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            /* 反射倒影 距离下面5px  */
            -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
        }
        #album p {
            position:absolute;
            left:calc(133px/2 - 800px/2);
            top:calc(200px/2 - 800px/2);
            width:800px;
            height:800px;
            background:rgba(255,255,255,0.1);
            transform:translateY(100px) rotateX(90deg);
            border-radius:50%;
        }
    </style>
</head>
<body>
<div id="album">
        <img src="images/zwx.jpg" alt="">
        <img src="images/sd1.jpg" alt="">
        <img src="images/sd2.jpg" alt="">
        <img src="images/sd3.jpg" alt="">
        <img src="images/demo-1-bg.jpg" alt="">
        <img src="images/zwx.jpg" alt="">
        <img src="images/sd1.jpg" alt="">
        <img src="images/sd2.jpg" alt="">
        <img src="images/sd3.jpg" alt="">
        <img src="images/demo-1-bg.jpg" alt="">
    <p></p>
</div>
</body>
<script src="dep/bootstrap-3.3.7-dist/js/jquery-1.12.4.min.js"></script>
<script>
    /*旋转分散*/
    window.onload = function() {
        var album = document.getElementById('album'),
            aImg = document.querySelectorAll('img');
        for (var i = 0; i < aImg.length; i++) {
            // 图片旋转分散 36°
            aImg[i].style.transform = 'rotateY(' + i * 360 / aImg.length + 'deg) translateZ(300px)';
            aImg[i].style.transition = 'transform 1s ' + (aImg.length - i) * 0.1 + 's';
        }
        var lastX = 0, // 前一次的坐标X
            lastY = 0,
            nowX = 0, // 当前的坐标X
            nowY = 0,
            desX = 0,
            desY = 0,
            rotX = -30,
            rotY = 0,
            timer; // 时间间隔
        document.onmousedown = function(e) {
            var e = e || event;
            lastX = e.clientX;
            lastY = e.clientY;
            this.onmousemove = function(e) {
                var e = e || event;
                nowX = e.clientX;
                nowY = e.clientY;
                desX = nowX - lastX;
                desY = nowY - lastY;
                // 更新album的旋转角度，拖拽越快-> des变化大 -> roY变化大 -> 旋转快
                rotX -= desY * 0.1;
                rotY += desX * 0.2;
                album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
                lastX = nowX;
                lastY = nowY;
            }
            document.onmouseup = function() {
                this.onmousemove = this.onmouseup = null;
                timer = setInterval(function() {
                    desX *= 0.95;
                    desY *= 0.95;
                    rotX -= desY * 0.1;
                    rotY += desX * 0.2;
                    album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';

                    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                        clearInterval(timer);
                    }
                }, 13)
            }
            // 阻止默认行为
            return false;
        }
    }
</script>
</html>