轮播图 3D轮播图

轮播图

轮播图.gif

主要代码：

github地址：https://github.com/zheever/circle_album/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE

---

3D轮播图

参考：https://juejin.im/post/5aeafb0f6fb9a07ac76ea983

3D轮播图.gif

主要代码：

设置perspective属性

.container{
            perspective: 1600px;
            -webkit-perspective: 1600px;       
        }

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。

把图片旋转60度，再在Z轴上偏移300px，形成立体的六边形

        var photos_container = document.getElementById("photos");
        var photos_list = photos_container.getElementsByTagName("img");
        var photos_num = photos_list.length;
        var ang = Math.floor(360 / photos_num);
        for(var i = 0; i < photos_num; i++){
            photos_list[i].style = 'transform : rotateY(' + ang*i + 'deg) translateZ(300px) ';
        }

点击按钮时向右或者向左旋转60度

        var rotate_deg = 0;
        document.getElementsByClassName('prev_button')[0].onclick = function () {
            rotate_deg += ang;
            photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
        }
        document.getElementsByClassName('next_button')[0].onclick = function () {
            rotate_deg -= ang;
            photos_container.style = 'transform : rotateY(' + rotate_deg + 'deg)';
        }

github地址：https://github.com/zheever/circle_album/tree/master/3D%E8%BD%AE%E6%92%AD%E5%9B%BE