双十一的浪漫，快去表白

Posted 2022-12-07 浪漫主义码农

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了双十一的浪漫，快去表白相关的知识，希望对你有一定的参考价值。

酷炫相册，手把手教你

前面总结了2D/3D转换的是知识点，就想着来一点小练习。准备写一个好看的相册。如下图效果。

1.分析并实现

我们来分析一下。这张图的结构。我们要知道x,y,z每条轴旋转的效果。关于2D/3D平移的知识看上一篇博客CSS3 2D/3D转换手把手教你。

1. 要让所有图片从一个div出来，首先应该是六张图片在一个容器里面，并且在一个平面上重叠着

我们应该控制一下图片的大小都是一样的，不然效果会不好。

<style>
    * 
        padding: 0;
        margin: 0;
    
    body 
        /* 透视，景深 */
        perspective: 800px;
        background: #000;
    
    #warp 
        width: 200px;
        height: 300px;
        border: 1px solid red;
        margin: 240px auto;
        transform-style: preserve-3d;
        transform: rotateX(-15deg) rotateY(0deg);
    
    img 
        width: 200px;
        height: 300px;
        position: absolute;
    
</style>
<body>
    <div id="warp">
        <img src="./img//tx.jpg">
        <img src="./img/touxiang1.jpg">
        <img src="./img/touxiang2.jpg">
        <img src="./img/touxiang3.jpg">
        <img src="./img/touxiang4.jpg">
        <img src="./img/touxiang5.jpg">
    </div>
</body>

2. 六张图片围成的是一个圆，那么我们应该是让每一张图片发生一定角度的旋转，旋转角度为`360/图片的张数` 并且我们要让每一张图片都平移出来，那么就是translateZ()，从z轴平移出来。

<script>
    var x = 360 / document.querySelectorAll("img").length;//获取旋转的角度
        document.querySelectorAll("img").forEach(function (item, index) //遍历所以的图片
            item.style.transform = "rotateY(" + index * x + "deg) translateZ(300px)"//旋转角度
        )
</script>

这个时候效果来到了这样：

3. 相册已经出来了，我们只要添加鼠标的事件来控制它的旋转了

我们要计算鼠标移动的距离差，距离差=现在的坐标-上一次的坐标。然后用现在的坐标加上距离差就可以了。

那么上一次的坐标就是点击
整体的思路就是这样了。详细的注解在代码里面。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="warp">
        <img src="./img//tx.jpg">
        <img src="./img/touxiang1.jpg">
        <img src="./img/touxiang2.jpg">
        <img src="./img/touxiang3.jpg">
        <img src="./img/touxiang4.jpg">
        <img src="./img/touxiang5.jpg">
    </div>
</body>
<style>
    * 
        padding: 0;
        margin: 0;
    
    body 
        /* 透视，景深 */
        perspective: 800px;
        background: #000;
    
    #warp 
        width: 200px;
        height: 300px;
        border: 1px solid red;
        margin: 240px auto;
        transform-style: preserve-3d;
        transform: rotateX(-15deg) rotateY(0deg);
    
    img 
        width: 200px;
        height: 300px;
        position: absolute;
    
</style>
<script>
    window.onload = function ()   //浏览器加载的时候
        var x = 360 / document.querySelectorAll("img").length;//获取旋转的角度
        document.querySelectorAll("img").forEach(function (item, index) //遍历所以的图片
            // console.log(item)
            item.style.transform = "rotateY(" + index * x + "deg) translateZ(300px)"//旋转角度和平移
            item.style.zIndex = -index
            // 动画、过渡
            item.style.transition = "transform 1s " + index * 0.1 + "s"//出场动画
        )
    
    //鼠标实践  点击  拖动  松开(改变容器旋转度数)
    // 距离差  当前鼠标坐标 - 上一次鼠标坐标
    var nowx, nowy, lastx, lasty; //现在的坐标和上一次的坐标
    var diffx, diffy;//距离差
    var rox = -15, roy = 0;//总的旋转度数 要和起始值相同
    var warp = document.getElementById("warp");
    document.onmousedown = function (el)  //el是event对象
        console.log(el.clientX, el.clientY)
        lastx = el.clientX, lasty = el.clientY;//获取鼠标点击坐标
        this.onmousemove = function (el)  //鼠标移动事件
            nowx = el.clientX;
            nowy = el.clientY;
            //TODO 旋转
            diffx = nowx - lastx;
            diffy = nowy - lasty;
            roy += diffx;
            rox -= diffy;
            warp.style.transform = "rotateX(" + rox + "deg) rotateY(" + roy + "deg)"
            lastx = nowx;
            lasty = nowy;
        
        this.onmouseup = function () //鼠标松开事件
            this.onmousemove = null
            this.onmouseup = null
        
    
</script>
</html>