抖音很火的3D旋转相册 (源代码分享)

摘要:
效果:旋转,向上移动鼠标,打开百度云盘代码共享:链接:https://pan.baidu.com/s/1d7Rozcs7x6Pgt6WxpGphiQ提取代码:3dpt实现过程工具:右键单击计算机记事本材料:照片打开方法:单击浏览器打开代码技术:Html+css步骤1:准备照片规格100×1006图片400×4006大图片(图片应该是方形或变形的,当然,您可以拍摄其他规格的照片并相应调整代码的大小)和将它们放入img文件

效果:

旋转,鼠标移上旋张开

抖音很火的3D旋转相册 (源代码分享)第1张

抖音很火的3D旋转相册 (源代码分享)第2张

百度云盘代码分享:

链接:https://pan.baidu.com/s/1d7Rozcs7x6Pgt6WxpGphiQ
提取码:3dpt

实现流程

工具:电脑右键记事本 

材料:照片

打开方式:点击浏览器打开

代码技术:Html+css

步骤1:准备照片

规格100×100 6张图片  400×400 6张大图片  (图片最好正方形不然会变形、当然你可以拿其他规格照片,代码对应调整大小)放到img文件夹中

抖音很火的3D旋转相册 (源代码分享)第3张

 步骤2:编写CSS文件

在css文件目录下创建一个style.css文件 (可以在html内容修改引用css文件路径)

电脑右键新建一个记事本.txt文件,编辑完代码把后缀改成.css

抖音很火的3D旋转相册 (源代码分享)第4张抖音很火的3D旋转相册 (源代码分享)第5张
@charset "utf-8";
*{
    margin:0;
    padding:0;
}
body{
    max- 100%;
    min- 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}
li{
    list-style: none;
}
.box{
    200px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotateX(13deg);
    -webkit-animation:move 5s linear infinite;
}
.minbox{
    100px;
    height:100px;
    position: absolute;
    left:50px;
    top:30px;
    -webkit-transform-style:preserve-3d;
}
.minbox li{
    100px;
    height:100px;
    position: absolute;
    left:0;
    top:0;
}
.minbox li:nth-child(1){
    background: url(../img/01.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
    background: url(../img/02.png) no-repeat 0 0;
    -webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
    background: url(../img/03.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
    background: url(../img/04.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
    background: url(../img/05.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
    background: url(../img/06.png) no-repeat 0 0;
    -webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
    background: url(../img/1.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
    background: url(../img/2.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
    background: url(../img/3.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
    background: url(../img/4.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
    background: url(../img/5.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
    background: url(../img/6.png) no-repeat 0 0;
    -webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
     800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform-style: preserve-3d;
    
}
.maxbox li{
     200px;
    height: 200px;
    background: #fff;
    border:1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    -webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
    -webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
    -webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
    -webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
    -webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
    -webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
    -webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
    -webkit-transform:translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
.box:hover ol li:nth-child(2){
    -webkit-transform:rotateX(180deg) translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
.box:hover ol li:nth-child(3){
    -webkit-transform:rotateX(-90deg) translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
.box:hover ol li:nth-child(4){
    -webkit-transform:rotateX(90deg) translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
.box:hover ol li:nth-child(5){
    -webkit-transform:rotateY(-90deg) translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
.box:hover ol li:nth-child(6){
    -webkit-transform:rotateY(90deg) translateZ(300px);
     400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top: -100px;
}
@keyframes move{
    0%{
        -webkit-transform: rotateX(13deg) rotateY(0deg);
    }
    100%{
        -webkit-transform:rotateX(13deg) rotateY(360deg);
    }
}
View Code

步骤3:编写HTML文件

电脑右键新建一个记事本.txt文件,编辑完代码把后缀改成.html。例如 现女朋友相册.html

抖音很火的3D旋转相册 (源代码分享)第6张抖音很火的3D旋转相册 (源代码分享)第7张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>

<div class="box">
    <ul class="minbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol class="maxbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
<script language="javascript">
function playmusic(){
var xx=document.getElementById("bgsound").src;
var url="C:\Users\Administrator\Desktop\炫酷3D相册\img/音乐.mp3";
if(xx==""){
document.getElementById("bgsound").src=url;
document.getElementById("musicbtn").value="停止播放";
}else{
document.getElementById("bgsound").src="";
document.getElementById("musicbtn").value="播放音乐";
}
}
</script>
<input id="musicbtn" onClick="playmusic()" value="播放音乐" type="button" />
<bgsound src="" loop="-1" id="bgsound" />
</body>
</html>
View Code

整个文件目录结构

抖音很火的3D旋转相册 (源代码分享)第8张

 抖音很火的3D旋转相册 (源代码分享)第9张

 抖音很火的3D旋转相册 (源代码分享)第10张

免责声明:文章转载自《抖音很火的3D旋转相册 (源代码分享)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇GOOSE信息交换方式LambdaQueryWrapper 日期格式转换,匹配精确日期及为空日期下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS之多个div一行排列

  使多个div横着排的两种方法,一种是浮动float,一种是布局display   一、使用float   元素一旦浮动,脱离文档流(不占页面空间,后面未浮动元素会上前补位。   1、代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

移动端界面适配

本文引自:http://www.cnblogs.com/xianyulaodi/p/5533201.html  摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话,就很好...

用原生css实现高斯模糊、黑白等滤镜效果

  —引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。 默认值 none 继承 none 动画支持 是 版本...

jQuery 菜单项切换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; padding: 0; ma...

CSS3去除手机浏览器button点击出现的高亮框

在工作中常常遇到在手机浏览器中浏览网页时。点击页面中的button或者是具备点击事件的元素,就会出现一个默认的高亮框。影响总体的感官体验。能够用一个简单的css3属性来解决:tap-highlight-color,最好加上webkit浏览器前缀。 -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-t...

解决pc端屏幕缩放比例对页面布局的影响

现在很多笔记本电脑都推荐将缩放设置为125%,等比例放大显示。 这对我们前端的页面的布局会产生一些影响 首先,单独的响应式布局hold不住这个问题,因为出问题的是device-pixel-ratio。 问题现象是高分屏下整好的东西,在普分屏下会放大;而普分屏下整好的东西,在高分屏上会缩小。 重现这个问题不需要高分屏,直接用Ctrl++或者Ctrl+-出...