如何做3D相册想学的可以看过来

最近抖音上特别火的3D相册，感觉特别高大上，想学的可以看看教程。

抖音上的效果

第一步：首先按照这个目录创建文件夹

文件目录

第二步：将需要的照片放在img文件夹中，照片名字按下面方式命名，照片大小可裁剪为像素580*549 左右就行（长*宽）后缀为.jpg

照片命名

第三步：在css文件夹中新建txt文件，把以下代码复制到txt文件中，并把txt文件名改为index.css保存

新建txt文件

复制代码到txt文件中

将以下代码复制到该文件，并保存

html{

background: #000;

height: 100%;

}

/*最外层容器样式*/

.wrap{

position: relative;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 200px;

height: 200px;

margin: auto;

/*改变左右上下,图片方块移动*/

}

/*包裹所有容器样式*/

.cube{

width: 200px;

height: 200px;

margin: 0 auto;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

-webkit-animation: rotate 20s infinite;

/*匀速*/

animation-timing-function: linear;

}

@-webkit-keyframes rotate{

from{transform: rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

position: absolute;

width: 200px;

height: 200px;

opacity: 0.8;

transition: all .4s;

}

/*定义所有图片样式*/

.pic{

width: 200px;

height: 200px;

}

.cube .out_front{

transform: rotateY(0deg) translateZ(100px);

}

.cube .out_back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .out_left{

transform: rotateY(90deg) translateZ(100px);

}

.cube .out_right{

transform: rotateY(-90deg) translateZ(100px);

}

.cube .out_top{

transform: rotateX(90deg) translateZ(100px);

}

.cube .out_bottom{

transform: rotateX(-90deg) translateZ(100px);

}

/*定义小正方体样式*/

.cube span{

display: bloack;

width: 100px;

height: 100px;

position: absolute;

top: 50px;

left: 50px;

}

.cube .in_pic{

width: 100px;

height: 100px;

}

.cube .in_front{

transform: rotateY(0deg) translateZ(50px);

}

.cube .in_back{

transform: translateZ(-50px) rotateY(180deg);

}

.cube .in_left{

transform: rotateY(90deg) translateZ(50px);

}

.cube .in_right{

transform: rotateY(-90deg) translateZ(50px);

}

.cube .in_top{

transform: rotateX(90deg) translateZ(50px);

}

.cube .in_bottom{

transform: rotateX(-90deg) translateZ(50px);

}

/*鼠标移入后样式*/

.cube:hover .out_front{

transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .out_back{

transform: translateZ(-200px) rotateY(180deg);

}

.cube:hover .out_left{

transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .out_right{

transform: rotateY(-90deg) translateZ(200px);

}

.cube:hover .out_top{

transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .out_bottom{

transform: rotateX(-90deg) translateZ(200px);

}

将文件命名为index.css

第四步：新建txt文件，复制以下代码到txt文件中，并把txt文件名改为“3D相册.html”

新建txt文件

将以下代码复制到文件，并保存

css-3d旋转

将代码复制到txt文件中

将文件夹名改为3D相册.html

第五步：双击打开“3D相册.html”文件，查看效果，大功告成

最终3D相册效果

如需要源文件，可关注后，私信回复“3D相册”获取。

本站声明：以上部分图文视频来自网络，如涉及侵权请联系删除