3D 旋转相册立方体的盒子相册(源码分享)

效果图

css代码

*{margin: 0;padding: 0;
}
body{display: flex;justify-content: center;align-items: center;background-color: #333;min-height: 100vh;perspective: 1000px;
}
//构建 3D的空间
.con{position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: move 5s linear infinite;
}//盒子旋转的动画
@keyframes move {0%{transform: rotateY(0deg);}100%{transform: rotateY(360deg);}
}
//让每个面居中 堆在一起
.box{position: absolute;top: 0;left: 0;width: 300px;height: 300px;opacity: 0.8;transition: 3s;background-position: center;background-color: pink;
}.box1{background-image: url(./1.jpg);background-size: cover;//x轴转动90 在拉开距离transform: rotateX(90deg) translateZ(150px);
}
.box2{background-image: url(./5.jpg);background-size: cover;//x轴转动-90 在拉开距离transform: rotateX(-90deg) translateZ(150px);
}
.box3{background-image: url(./1.jpg);background-size: cover;//y轴转动90 在拉开距离transform: rotateY(90deg) translateZ(150px);
}
.box4{background-image: url(./4.jpg);background-size: cover;//y轴转动-90 在拉开距离transform: rotateY(-90deg) translateZ(150px);
}
.box5{background-image: url(./2.jpg);background-size: cover;//向前 拉开距离transform:  translateZ(150px);
}
.box6{background-image: url(./7.jpg);background-size: cover;//向后 拉开距离transform: translateZ(-150px);
}// con 被鼠标放上去 后 每个面的方向不变 只增大距离
.con:hover .box1{//x轴转动90 在拉开距离transform: rotateX(90deg) translateZ(300px);
}
.con:hover .box2{//x轴转动-90 在拉开距离transform: rotateX(-90deg) translateZ(300px);
}
.con:hover .box3{//y轴转动90 在拉开距离transform: rotateY(90deg) translateZ(300px);
}
.con:hover .box4{//y轴转动-90 在拉开距离transform: rotateY(-90deg) translateZ(300px);
}
.con:hover .box5{//向前 拉开距离transform: translateZ(300px);
}
.con:hover .box6{//向后 拉开距离transform: translateZ(-300px);
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><!-- //盒子容器搭建3D空间 --><div class="con"><!-- 盒子的6个面 --><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div><div class="box box4"></div><div class="box box5"></div><div class="box box6"></div></div>
</body>
</html>

3D 旋转相册立方体的盒子相册(源码分享)相关推荐

一款炫酷的相册动画合集【源码分享】
这是一款炫酷的相册动画合集,集合了粒子.雪花.气泡.蝴蝶心形路径.星星.相册翻页等效果,有需要的可以点击下方名称链接下载. 效果图炫酷的相册动画合集整理不易,欢迎大家交流学习.
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
3D语音天气球（源码分享）——完结篇
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两 ...
3D语音天气球（源码分享）本文出自大苞米的博客（http://blog.csdn.net/a396901990）
开篇废话: 由于这篇文章是本系列最后一篇,有必要进行简单的回顾和思路整理. 这个程序是由两部分组成,Android端和Unity端: 1.Unity端负责3D球的创建,显示和旋转:3D语音天气球(源码 ...
最新UI界面很简洁的方盒子iApp源码+适合做工具箱
正文: 分享一个UI界面很简洁的方盒子iapp源码,非常适合拿来做工具箱的,这个UI源码已经很久的了,在网上看到的,就拿出来再分享一下吧! 程序: wwxjes.lanzoup.com/ishUo0k ...
unity3d游戏3d局域网联机吃球游戏完整项目源码分享
unity3d游戏3d局域网联机吃球游戏完整项目源码分享免费下载地址: 链接:https://pan.baidu.com/s/1APlOCmoK9aUfiVJD48dBQA 提取码:p5nl 复制这 ...
免费资源分享（八） 3D跑酷游戏源码分享
免费资源分享(八) 3D跑酷游戏源码分享分享链接见文章底部. 如果该文章侵犯到您的权益,请及时主动留言联系,我们将及时删除相关内容. (需要指定场景.模型.音效.各类游戏源码等资源的,可以在评论区 ...
【iapp源码】UI界面很简洁的方盒子iapp源码
分享一个UI界面很简洁的方盒子iapp源码,非常适合拿来做工具箱的, 这个UI源码已经很久的了,在网上看到的,就拿出来再分享一下吧!
Unity游戏源码分享-3d机器人推箱子游戏
Unity游戏源码分享-3d机器人推箱子游戏一个非常意思的3D游戏工程地址:https://download.csdn.net/download/Highning0007/88098014
Android 亲测源码分享
Android 亲测源码分享一.优质视频教程 1.老罗Android开发视频教程(更多经典教程制作进行中) http://www.apkbus.com/android-94796-1-1.html ...

3D 旋转相册立方体的盒子相册(源码分享)

效果图

css代码

html

3D 旋转相册立方体的盒子相册(源码分享)相关推荐

最新文章

热门文章

3D 旋转相册 立方体的盒子 相册(源码分享)

效果图

css代码

html

3D 旋转相册 立方体的盒子 相册(源码分享)相关推荐

最新文章

热门文章

3D 旋转相册立方体的盒子相册(源码分享)

3D 旋转相册立方体的盒子相册(源码分享)相关推荐