前端开发原生JS和CSS3实现3D旋转效果

前端开发新手 软件
软件开发前端教学视频教程
前端开发软件介绍说明

html 代码

    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                background: black;
                padding-top: 140px;
            }
            #wrap {
                -webkit-perspective: 1000px;
                /* 设置视距*/
            }
            #photos {
                -webkit-user-select: none;
                width: 120px;
                height: 180px;
                /*border: 1px solid #ccc;*/
                margin: 0 auto;
                transform-style: preserve-3d;
                /*设置3d环境*/
            }
            #photos img {
                width: 100%;
                height: 100%;
                position: absolute;
                box-shadow: 0 0 8px #eaeaea;
                box-shadow: 1px -1px 6px #666;
                border-radius: 4px;
                -webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(
                                0,
                                0,
                                0,
                                0
                            )
                            40%, rgba(0, 0, 0, 0.5));
                /*设置倒影*/
                cursor: pointer;
            }
            #photos div {
                /*底部圆盘*/
                width: 1200px;
                height: 1200px;
                border-radius: 50%;
                position: absolute;
                top: 102%;
                left: 50%;
                margin-left: -600px;
                margin-top: -600px;
                transform: rotateX(90deg);
                background: -webkit-radial-gradient(
                    center center,
                    600px 600px,
                    rgba(158, 158, 222, 0.5),
                    rgba(0, 0, 0, 0)
                );
            }
            button {
                /*margin-top: -300px;*/
            }
        </style>
    </head>
    <body>
        <div id=”wrap”>
            <div id=”photos”>
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/321-320×320.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <img
                    src=”https://www.rokub.com/wp-content/uploads/2018/11/331-980×450.jpg”
                />
                <div></div>
            </div>
        </div>
        <script type=”text/javascript”>
            var photosDom = document.getElementById(‘photos’); //获取图片数组
            var images = photosDom.getElementsByTagName(‘img’); //获取图片数量
            var len = images.length;
            //计算每张图片按Y轴旋转的角度
            var deg = 360 / len;
            var startY = -8;
            var startX = 0;
            var j = 0;
            var i = len;
            var create = setInterval(function () {
                var a = setInterval(function () {
                    j += 9;
                    // console.log(j)
                    images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(‘ + j + ‘px)’; //先旋转 后推动
                    if (j == 360) {
                        j = 0;
                        images[i].setAttribute(‘ondragstart’, ‘return false’);
                        clearInterval(a);
                    }
                }, 10) < br />
                    i–;
                if (i == -1) {
                    clearInterval(create);
                    clearInterval(a);
                    return;
                }
            }, 500)
                 function rotate() {
             photosDom.style.transform = “rotateX(” + startY + “deg) rotateY(” + (startX++) + “deg)”;
                    }
                    var timer = setInterval(rotate, 30);
                    document.onmousedown = function(e1) {
             clearInterval(timer);
                    var downX = e1.clientX;
                    var downY = e1.clientY;
                    document.onmousemove = function(e2) {
             startX = (e2.clientX – downX) * 0.2 + startX;
                    startY = -(e2.clientY – downY) * 0.1 + startY;
                    photosDom.style.transform = “rotateX(” + startY + “deg) rotateY(” + startX + “deg)”;
                    downX = e2.clientX;
                    downY = e2.clientY;
                    }
                    }
                    document.onmouseup = function() {
             timer = setInterval(rotate, 30);
                    document.onmousemove = null;
                    }
        </script>
    </body>
</html>
深圳软件前端开发培训
前端用的开发软件下载
mac下前端开发软件
» 本文来自:前端开发者 » 《前端开发原生JS和CSS3实现3D旋转效果》
» 本文链接地址:https://www.rokub.com/6884.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!