How to use html+css+js to implement 3D photo album-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use html+css+js to implement 3D photo album

藏色散人

Apr 12, 2020 pm 02:29 PM

3d photo album

Use html css js to implement 3D photo album, come and upload photos

Recommendation: "js basic tutorial"

Rendering:

How to use html+css+js to implement 3D photo album

The code is as follows, copy it and use it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #29454d;
            /*禁止文字被选中*/
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
            overflow: hidden;
        }

        .box {
            position: relative;
            height: 500px;
            width: 500px;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 2000px;
        }

        .di {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 200px;
            width: 200px;
            transform: translate(-50%, -50%) rotatex(90deg);
            transform-style: preserve-3d;
        }

        .z {
            position: relative;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            transform-style: preserve-3d;
            /*transform: rotatez(1deg);*/
        }

        p {
            margin: 0;
            position: absolute;
            top: 0;
            /*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/
            left: 25px;
            height: 200px;
            width: 150px;
            border: 2px solid #fd7068;
            box-sizing: border-box;
            background-color: #ffffff;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /*opacity: .7;*/
            font-size: 10px;
            line-height: 200px;
            text-align: center;
            /*box-shadow: 0 0 100px #16ff8b;*/
            /*倒影，不兼容*/
            -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
            box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
            /*backface-visibility: hidden;*/
        }
    </style>
</head>

<body>
<div>
    <div>
        <div>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
            <p>可以拖拽图片文件进来</p>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        setPs();
        move();
        drop();
    }
        //给每个p标签设置位置
    function setPs() {
        var ps = document.getElementsByTagName(&#39;p&#39;);
        for (var i = 0; i < ps.length; i++) {
            ps[i].style.transform = &#39;rotatex(-90deg) rotatey(&#39; + i * 30 + &#39;deg) translatez(400px)&#39;
        }
    }
    //鼠标拖动旋转
    function move() {
        var zBox = document.querySelector(&#39;.z&#39;);
        var xBox = document.querySelector(&#39;.di&#39;);
        //声明计算鼠标移动速度用的变量
        var speedTimer = null;
        var speedX = 0;
        var speedY = 0;
        //声明记录旋转角度的两个变量
        var xDegNow = 90;
        var zDegNow = 0;
        //声明变量记录要旋转的角度
        var xDegDistance = 0;
        var zDegDistance = 0;
        //声明变量记录是否发生鼠标移动事件
        var isMove = false;
        window.onmousedown = function (e) {
            //鼠标按下
            //清除过渡属性
            xBox.style.transition = &#39;&#39;;
            zBox.style.transition = &#39;&#39;;
            //记录按下的坐标以及计算速度的初始坐标
            var xstart = e.clientX;
            var speedX_start = xstart;
            var ystart = e.clientY;
            var speedY_start = ystart;
            //记录用来计算速度的初始时间
            var tstart = new Date().getTime();
            var tnow = tstart;
            //设置计时器更新计算速度的当时时间
            speedTimer = setInterval(function () {
                tnow = new Date().getTime();
            },10)
            window.onmousemove = function (e) {
                //鼠标移动
                isMove = true;
                //记录当时的坐标计算距离
                var xnow = e.clientX;
                var ynow = e.clientY;
                var xDistance = xnow - xstart;
                var yDistance = ynow - ystart;
                //如果计时超过一定时间（10毫秒），计算速度
                if (tnow - tstart >= 10) {
                    //速度=（现在的坐标-初始坐标）/（现在时间-初始时间）
                    speedX = (xnow - speedX_start) / (tnow - tstart);
                    speedY = (ynow - speedY_start) / (tnow - tstart);
                    //让初始时间和坐标等于现在的时间和坐标
                    tstart = tnow;
                    speedX_start = xnow;
                    speedY_start = ynow;
                }
                //把鼠标移动距离计算成角度后设置到页面上
                zDegDistance = zDegNow - (xDistance / 10);
                zBox.style.transform = &#39;rotatez(&#39; + zDegDistance + &#39;deg)&#39;;
                xDegDistance = xDegNow - (yDistance / 10);
                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
                xBox.style.transform = &#39;translate(-50%,-50%) rotatex(&#39; + xDegDistance + &#39;deg)&#39;;
            };
        };
        window.onmouseup = function (e) {
            //鼠标松开
            //清除计时器 清除鼠标移动事件
            clearTimeout(speedTimer);
            window.onmousemove = null;
            //判断如果发生移动
            if (isMove) {
                //添加过渡属性
                xBox.style.transition = &#39;all 0.5s ease-out&#39;;
                zBox.style.transition = &#39;all 0.5s ease-out&#39;;
                //根据速度计算目标角度，设置到页面上
                zDegDistance = zDegDistance - (speedX * 10);
                zBox.style.transform = &#39;rotatez(&#39; + zDegDistance + &#39;deg)&#39;;
                xDegDistance = xDegDistance - (speedY * 10);
                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
                xBox.style.transform = &#39;translate(-50%,-50%) rotatex(&#39; + xDegDistance + &#39;deg)&#39;;
                //记录当前角度的值更新
                xDegNow = xDegDistance;
                zDegNow = zDegDistance;
                //用到的变量重置
                isMove = false;
                speedX = 0;
                speedY = 0;
                xDegDistance = 0;
                zDegDistance = 0;
            }
        };

    }
    //鼠标拖拽文件
    function drop() {
        //取消鼠标拖拽文件进入窗口的默认行为
        window.ondragover = function (e) {
            e.preventDefault();
        }
        window.ondrop = function (e) {
            e.preventDefault();
        }
        //添加拖拽到p标签的事件
        var ps = document.getElementsByTagName(&#39;p&#39;);
        for (var i = 0; i < ps.length; i++) {
            ps[i].index = i;
            ps[i].ondrop = function (e) {
                var w = new FileReader();
                w.index = this.index;
                w.readAsDataURL(e.dataTransfer.files[0]);
                w.onload = function () {
                    ps[this.index].style.backgroundImage = &#39;url(&#39; + w.result + &#39;)&#39;;
                    ps[this.index].innerHTML = &#39;&#39;;
                }
            }
        }
    }
</script>
</body>
</html>

The above is the detailed content of How to use html+css+js to implement 3D photo album. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:cnblogs. If there is any infringement, please contact admin@php.cn delete

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

See all articles