zoukankan html css js c++ java

3D轮播图

一、效果如下

https://momoxiaobai.github.io/xiaolu/3Dcirculatrion/index.html（demo地址）

二、代码如下

<!DOCTYPE html>
<html >
<head lang="en">
    <meta charset="UTF-8">
    <title>3D轮播图</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div class="contains">
        <div class="images img0"><img src="images/000.jpg"></div>
        <div class="images img1"><img src="images/001.jpg"></div>
        <div class="images img2"><img src="images/002.jpg"></div>
        <div class="images img3"><img src="images/003.jpg"></div>
        <div class="images img4"><img src="images/004.jpg"></div>
        <div class="images img5"><img src="images/005.jpg"></div>
        <div class="images img6"><img src="images/006.jpg"></div>
        <div class="images img7"><img src="images/007.jpg"></div>
    </div>
</body>

</html>

*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
    perspective:3500px;

}


.contains{
    width:100%;
    transform-style: preserve-3d;
    height:100%;
    background-color: yellowgreen;
    margin:0 auto;
    /*margin-top:40px;*/
}
.images{
    width:200px;
    height:300px;
    border:1px solid lightgray;
    position: absolute;
}
.images img{
    width:200px;
    height:300px;
    /*transform:translateZ(500px);*/
    /*perspective:1500;*/
}

.img0{
    transform:translate(220px,200px) translateZ(400px) rotateY(270deg);
    -webkit-animation:rotate3D_0 10s linear infinite;

}
.img1{
    transform:translate(320px,200px) translateZ(200px)  rotateY(225deg);
    -webkit-animation:rotate3D_1 10s linear infinite;
}
.img2{
    transform:translate(550px,200px) translateZ(0px)  rotateY(180deg);
    -webkit-animation:rotate3D_2 10s linear infinite;
}
.img3{
    transform:translate(800px,200px) translateZ(200px) rotateY(135deg);
    -webkit-animation:rotate3D_3 10s linear infinite;
}
.img4{
    transform:translate(900px,200px) translateZ(400px) rotateY(90deg);
    -webkit-animation:rotate3D_4 10s linear infinite;
}
.img5{
    transform:translate(750px,200px) translateZ(600px) rotateY(45deg);
    -webkit-animation:rotate3D_5 10s linear infinite;
}
.img6{
    transform:translate(550px,200px) translateZ(1000px) rotateY(0deg);
    -webkit-animation:rotate3D_6 10s linear infinite;
}
.img7{
    transform:translate(350px,200px) translateZ(600px) rotateY(-45deg);
    -webkit-animation:rotate3D_7 10s linear infinite;
}
@keyframes rotate3D_0{
    0%{
        transform:translate(220px,200px) translateZ(400px) rotateY(270deg);
    }
    12.5%{
        transform:translate(320px,200px) translateZ(200px)  rotateY(225deg);
    }
    25%{
        transform:translate(550px,200px) translateZ(0px) rotateY(180deg);
    }
    37.5%{
        transform:translate(800px,200px) translateZ(200px) rotateY(135deg);
    }
    50%{
        transform:translate(900px,200px) translateZ(400px) rotateY(90deg);
    }
    62.5%{
        transform:translate(750px,200px) translateZ(600px) rotateY(45deg);
    }
    75%{
        transform:translate(550px,200px) translateZ(1000px) rotateY(0deg);
    }
    87.5%{
        transform:translate(350px,200px) translateZ(600px) rotateY(-45deg);
    }
    100%{
        transform:translate(220px,200px) translateZ(400px) rotateY(-90deg);
    }
}

@keyframes rotate3D_1{
    0%{
        transform:translate(320px,200px) translateZ(200px)  rotateY(225deg);
    }
    12.5%{
        transform:translate(550px,200px) translateZ(0px) rotateY(180deg);
    }
    25%{
        transform:translate(800px,200px) translateZ(200px) rotateY(135deg);
    }
    37.5%{
        transform:translate(900px,200px) translateZ(400px) rotateY(90deg);
    }
    50%{
        transform:translate(750px,200px) translateZ(600px) rotateY(45deg);
    }
    62.5%{
        transform:translate(550px,200px) translateZ(1000px) rotateY(0deg);
    }
    75%{
        transform:translate(350px,200px) translateZ(600px) rotateY(-45deg);
    }
    87.5%{
        transform:translate(220px,200px) translateZ(400px) rotateY(-90deg);
    }
    100%{
        transform:translate(320px,200px) translateZ(200px) rotateY(-135deg);
    }
}

@keyframes rotate3D_2{
     0%{
         transform:translate(550px,200px) translateZ(0px)  rotateY(180deg);
     }
     12.5%{
         transform:translate(800px,200px) translateZ(200px) rotateY(135deg);
     }
     25%{
         transform:translate(900px,200px) translateZ(400px) rotateY(90deg);
     }
     37.5%{
         transform:translate(750px,200px) translateZ(600px) rotateY(45deg);
     }
     50%{
         transform:translate(550px,200px) translateZ(1000px) rotateY(0deg);
     }
     62.5%{
         transform:translate(350px,200px) translateZ(600px) rotateY(-45deg);
     }
     75%{
         transform:translate(220px,200px) translateZ(400px) rotateY(-90deg);
     }
     87.5%{
         transform:translate(320px,200px) translateZ(200px) rotateY(-135deg);
     }
     100%{
         transform:translate(550px,200px) translateZ(0px) rotateY(-180deg);
     }
 }

...类推，笨程序

我的方法比较笨，总是用最直接的方法，看大神的代码，恍然大悟，自己太笨了，可以让容器转，照片不转，代码就很少，但是怎么着也是自己辛苦写的，一点点调整的，还是做个对比吧。我是不是不太适合前端，但是我是真喜欢，虽然脑子不太好用，总是用笨办法，怎么办呢，钻进去就忘了换角度思考，不要直接上手，整体思路想想看还有没有好的办法，省时间省代码。

啰嗦这么多，思路是这样的，让照片摆在整体容器内，然后，照片旋转沿Y轴旋转，rotateY(ndeg); 结合perspective和transform-style:preserve-3d;

perspective

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

注意：perspective 属性只影响 3D 转换元素。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

transform-style

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意： 使用此属性必须先使用 transform 属性.

语法

transform-style: flat|preserve-3d;

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

三、值得借鉴的方法

*{
    margin:0;
    padding:0;
}
html,body{
    /*100%;*/
    /*height:100%;*/

perspective:2000px;

} 
.contains{
/*滚动容器*/
    width:100%;
    position: relative;
    transform-style: preserve-3d;
    height:100vh;
    animation:rotate3D 10s linear infinite;
}

.images{
    width:200px;
    height:300px;
    border:1px solid red;
    /*transform:translateY(200px);*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.contains img{
    width:200px;
    height:300px;
    /*position: absolute;*/
    /*transform:translateY(200px);*/
    /*position: absolute;*/

    /*margin: auto;*/

    border: 1px solid #c1c1c1;
    /*transform: translateZ(347px);*/
    /*transform:translateZ(500px);*/
    /*perspective:1500;*/
}

.img0{
    transform: rotateY(0deg) translateZ(300px) ;;
    /*-webkit-animation:rotate3D_0 10s linear infinite;*/

}
.img1{
    transform:  rotateY(60deg) translateZ(300px);
    /*-webkit-animation:rotate3D_1 10s linear infinite;*/
}
.img2{
    transform:  rotateY(120deg) translateZ(300px);
    /*-webkit-animation:rotate3D_2 10s linear infinite;*/
}
.img3{
    transform:  rotateY(180deg) translateZ(300px);
    /*-webkit-animation:rotate3D_3 10s linear infinite;*/
}
.img4{
    transform: rotateY(240deg) translateZ(300px);
    /*-webkit-animation:rotate3D_4 10s linear infinite;*/
}
.img5{
    transform: rotateY(300deg) translateZ(300px);
    /*-webkit-animation:rotate3D_5 10s linear infinite;*/
}
.img6{
    transform: rotateY(0deg);
    /*-webkit-animation:rotate3D_6 10s linear infinite;*/
}
.img7{
    transform: rotateY(-45deg);
    /*-webkit-animation:rotate3D_7 10s linear infinite;*/
}

@keyframes rotate3D{
    0%{
        transform: rotateY(0deg);
    }
    16.7%{
        transform:rotateY(60deg);
    }
    33.3%{
        transform:rotateY(120deg);
    }
    50.1%{
        transform: rotateY(180deg);
    }
    66.7%{
        transform: rotateY(240deg);
    }
    83.4%{
        transform: rotateY(300deg);
    }
    100%{
        transform:rotateY(360deg);
    }

}

思路就是让整个容器转起来，图片放到容器中间

.images{
    width:200px;
    height:300px;
    border:1px solid red;
    /*transform:translateY(200px);*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

加粗部分代码使得一个div位于父元素div中间（上下左右均居中）

查看全文

相关阅读:
owlCarousel 用法心得1 -20170405
js数组去重的四种方法
 js获取url参数值
 jq index()
jQuery(expression,[context])
音乐播放器的实现+显示当前时间的歌词（只显示当前时间的文本）
iOS自动布局框架-Masonry详解
 ios -完全实现代码设置 Could not find a storyboard named 'Main' in bundle NSBundle
Python使用MySQL数据库的
 iOS 阿里百川SDK集成注意点

原文地址：https://www.cnblogs.com/deerfig/p/6673900.html