VUE 中设置图片组三维旋转

作者: 你这个锤子 | 来源:发表于2024-07-23 17:41 被阅读0次

PPT学习2
2017.12.20 点击旋转图片、鼠标滑入离开、C#中的反射
三维变换
vue实现图片的旋转(点击一下旋转360°(2018.07.10
关于vue中图片压缩上传以及旋转图片
vue背景图片用样式绑定的方式
Vue项目常用插件
vue-lazyload图片错误替换
vue 正常引入图片的几种方法
vue 图片压缩

<!doctype html>
<html lang="en" onmousedown="return false">
<head>
    <meta charset="utf-8" />
    <title>doc</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .preview {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pic {
            width: 400px;
            height: 230px;
            position: absolute;
            right: -120px;
            top: 50%;
            transform-style: preserve-3d;
            animation: spin 30s infinite linear;
        }
        .pic:hover{
            animation-play-state: paused;  
        }
        .pic:not(:hover) {
            animation-play-state: running;  
        }
        @keyframes spin {
            from {
                transform: translateY(-90px) perspective(10000px) rotateX(-18deg) rotateY(0deg);;
            }

            to {
                transform: translateY(-90px) perspective(10000px) rotateX(-18deg) rotateY(360deg);;
            }
        }
        div.pic img {
            cursor: pointer;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }
    </style>
</head>
<body style="width:100%;height:100vh;overflow: hidden;">
    <div style="width:100%;height:100%;position: relative;display: flex;">
        <div class="preview">
            <img id="previewImg"
                src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4" />
        </div>
        <div class="pic">
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M01/46/47/wKgBzFitCGGATN0pAED_xEispOk233.tub.jpg@!rw4"
                draggable="false" />
            <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw4"
                draggable="false" />
        </div>
    </div>
    <script>
        var roY = 1
        var rox = -16
        var imgList = document.querySelectorAll('div.pic img');
        var imgl = Array.from(imgList).length;
        var deg = 360 / imgl;
        [].forEach.call(imgList, function (img, i) {
            img.style.cssText = 'transition: all 3000ms ease; transform: rotateY(' + i * deg + 'deg) translateX(30vw);';
            img.setAttribute('ondragstart', 'return false;');

            img.addEventListener('click', function () {
                // alert('你点击了按钮！');  
                document.getElementById("previewImg").src = img.src;
                [].forEach.call(imgList, function (imgitem, iItem) {
                    if (i == iItem) {
                        imgitem.style.cssText = 'transition: all 1000ms ease; transform: rotateY(' + iItem * deg + 'deg) translateX(36vw);';
                    } else {
                        imgitem.style.cssText = 'transition: all 1000ms ease; transform: rotateY(' + iItem * deg + 'deg) translateX(30vw);';
                    }
                });
                // 旋转轴
                var divs = document.querySelectorAll('div.pic');
                divs.forEach(function (div) {
                    div.style.cssText = `transition: all 150ms ease; transform: translateY(-90px) perspective(10000px) rotateX(${rox}deg) rotateY(${deg * roY}deg);`;
                });
                roY++
            });
        });
    </script>
</body>
</html>

image.png