3D图片旋转

3D图片旋转

dom代码：

<div class="carousel" data-gap="20" id="3DImg">
    <figure>
        <img v-for="(item,index) in imgList" :key="index" :src="item.img" width="400px" height="200px"/>
    </figure>
</div>

 

methods代码：

init3DImg(){
    window.addEventListener('load', function () {
        var carousels = document.querySelectorAll('.carousel');
        for (var i = 0; i < carousels.length; i++) {
            carousel(carousels[i]);
        }
    });
    function carousel(root) {
        var figure = root.querySelector('figure'),
            nav = root.querySelector('nav'),
            images = figure.children,
            n = images.length,
            gap = root.dataset.gap || 0,
            bfc = 'bfc' in root.dataset,
            theta = 2 * Math.PI / n,
            currImage = 0;

        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        window.addEventListener('resize', function () {
            setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        });
        setupNavigation();
        function setupCarousel(n, s) {
            var apothem = s / (2 * Math.tan(Math.PI / n));
            figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

            for (var i = 0; i < n; i++) {
                images[i].style.padding = gap + 'px';
            }for (i = 1; i < n; i++) {
                images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
                console.log(i * theta,apothem)
                images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
            }
            if (bfc) for (i = 0; i < n; i++) {
                images[i].style.backfaceVisibility = 'hidden';
            }rotateCarousel(currImage);
        }
        function setupNavigation() {
            function onClick(e) {
                currImage--;
                rotateCarousel(currImage);
            }
            let timer = setInterval(onClick,2000)
            var boxImg = document.getElementById('3DImg')
            boxImg.onmousemove=function(){clearInterval(timer);}
            boxImg.onmouseout=function(){timer = setInterval(onClick,2000)};
        }
        function rotateCarousel(imageIndex) {
            figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
        }
    }
},

 

css代码：

.carousel {
    padding: 10px;
    -webkit-perspective: 200px;
    perspective: 200px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 350px;
    height: 200px;
    cursor: pointer;
    > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    figure {
        margin: 0;
        width: 80%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 0.5s;
        transition: -webkit-transform 0.5s;
        //   transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        img {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0px;
        }
        img:not(:first-of-type) {
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}