![31840004a047b6a1542bd7c7ca0716a9.png](https://i-blog.csdnimg.cn/blog_migrate/7c9dfa58770c4fa946297381450afd16.png)
![cd9c0a4d56ccee27c4573fb767f14b43.png](https://i-blog.csdnimg.cn/blog_migrate/967cc0b2c530742178cf4b97b2056c4d.png)
3D正方体旋转相册
![cd9c0a4d56ccee27c4573fb767f14b43.png](https://i-blog.csdnimg.cn/blog_migrate/967cc0b2c530742178cf4b97b2056c4d.png)
![a36f8a4f5a9fdb4afba3f3401ebc3064.png](https://i-blog.csdnimg.cn/blog_migrate/97817d32c1004edbc99f0bea3e00229b.png)
最近旋转相册在抖音上很火,今天小编就给大家带来了具体的实现代码。上干货!
第一步 完成基本的HTML结构
![241d9ddde5b31655d12badb46f28c388.png](https://i-blog.csdnimg.cn/blog_migrate/ef115a7a5cdb794b731a9a07ac3b0342.jpeg)
第二步 利用transform变换,营造立体感。
![0b1008bb747b7c5247cb6988e675c297.png](https://i-blog.csdnimg.cn/blog_migrate/59738b2b5defa030a4ee083da9ef54a4.jpeg)
![8575b56dcc08d14dce022d25202ab0c1.png](https://i-blog.csdnimg.cn/blog_migrate/84ab45f696be0ec7e526e5a90775f135.jpeg)
![a265e068106e1a04853472ef3ee31be9.png](https://i-blog.csdnimg.cn/blog_migrate/3b6ba2caca4543322bcd7edcb01ea705.jpeg)
第三步 加入动画
![1b35ecd259b0864ba690a26dc19ff1f8.png](https://i-blog.csdnimg.cn/blog_migrate/9c8e52357a7f65d8af7db16fecaf9a56.jpeg)
![813fe38085481aaf24e793b27df06a0e.png](https://i-blog.csdnimg.cn/blog_migrate/3056fee48b58eb1e10f7f4b2a2ef05c5.jpeg)
![93ec93dd4a37f2cc604bd234cc6462e1.png](https://i-blog.csdnimg.cn/blog_migrate/6ce3b7f1061c8b6696a9a36882c6794a.jpeg)
实现的结果就是这样!!(原谅实在不会设置gif图 只能上个静态图)
最后附上源代码!!!照片换成自己想要展示的即可!!
3d相册* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 200px auto;
position: relative;
-webkit-perspective: 1500px;
}
ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg); -webkit-transform: rotateX(-30deg) rotateY(30deg); -moz-transform: rotateX(-30deg) rotateY(30deg); -o-transform: rotateX(-30deg) rotateY(30deg);
animation: 16s spin linear infinite;
}
li {
width: 400px;
height: 400px;
list-style-type: none;
position: absolute;
}
ul li img {
width: 100%;
height: 100%
}
ul :nth-child(1){
transform: rotateY(0deg) translateZ(200px); -webkit-transform: rotateY(0deg) translateZ(200px); -moz-transform: rotateY(0deg) translateZ(200px); -o-transform: rotateY(0deg) translateZ(200px);
}
ul :nth-child(2){
transform: rotateY(-90deg) translateZ(200px); -webkit-transform: rotateY(-90deg) translateZ(200px); -moz-transform: rotateY(-90deg) translateZ(200px); -o-transform: rotateY(-90deg) translateZ(200px);
}
ul :nth-child(3) {
transform: rotateY(-180deg) translateZ(200px); -webkit-transform: rotateY(-180deg) translateZ(200px); -moz-transform: rotateY(-180deg) translateZ(200px); -o-transform: rotateY(-180deg) translateZ(200px);
}
ul :nth-child(4){
transform: rotateY(-270deg) translateZ(200px); -webkit-transform: rotateY(-270deg) translateZ(200px); -moz-transform: rotateY(-270deg) translateZ(200px); -o-transform: rotateY(-270deg) translateZ(200px);
}
ul :nth-child(5){
transform: rotatex(90deg) translateZ(200px); -webkit-transform: rotatex(90deg) translateZ(200px); -moz-transform: rotatex(90deg) translateZ(200px); -o-transform: rotatex(90deg) translateZ(200px);
}
ul :nth-child(6){
transform: rotatex(90deg) translateZ(-200px); -webkit-transform: rotatex(90deg) translateZ(-200px); -moz-transform: rotatex(90deg) translateZ(-200px); -o-transform: rotatex(90deg) translateZ(-200px);
}
@keyframes spin
{
from
{
transform: translateZ(-10em) rotateX(0) rotateY(0deg); -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); -moz-transform: translateZ(-10em) rotateX(0) rotateY(0deg); -o-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
}
to
{
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -moz-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); -o-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
![8b831dcd8b47c99c44baca8587613d29.png](https://i-blog.csdnimg.cn/blog_migrate/5017712222e1ac2a149800b4fd2d7caf.jpeg)
扫码关注我们
内容编辑:任志远
图文排版:任志远