乐于分享
好资源不私藏
Hi, 请登录     注册     找回密码
当前位置：9i资源网 > 游戏源码 > 分享一个css 3d立体相册旋转源代码。

分享一个css 3d立体相册旋转源代码。

2020-08-26    未收录 分类：游戏源码 阅读(65) 评论(0)

感兴趣的可以看看，图片可以自己DIY。

 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>violet evergarden</title>
<style type="text/css">
@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
    max-width: 100%;
    min-width: 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;
    background-color: #0F0F0F;
}
li{
	list-style: none;
}
.box{
	width: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%;
	transform-style:preserve-3d;
	transform:rotateX(13deg);
	animation:move 30s linear infinite;
}
.minbox{
	width:200px;
	height:200px;
	position: absolute;
	left:50px;
	top:30px;
	transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	text-align: center;
	left:0;
	top:0;
	transition:all 2s ease;
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:0px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.3;
	transition:all 3s ease;
}
.minbox li:nth-child(1){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(0deg) translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(180deg) translateZ(50px);
	
}
.minbox li:nth-child(3){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(0deg) translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(180deg) translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570182782452&di=77598776a6a540f2c2b86801ca169969&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb3f3f1ae74213661504ea0872d70ca933be63d97.gif) no-repeat center center;
	transform:rotateY(90deg) translateZ(50px);
}

.maxbox li:nth-child(1){
	transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	transform:rotateY(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	transform:rotateY(90deg) translateZ(100px);
}
.box:hover ul li:nth-child(1){
	transform:translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ul li:nth-child(2){
	transform:rotateY(180deg) translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ul li:nth-child(3){
	transform:rotateX(-90deg) translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ul li:nth-child(4){
	transform:rotateX(90deg) translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ul li:nth-child(5){
	transform:rotateY(-90deg) translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ul li:nth-child(6){
	transform:rotateY(90deg) translateZ(100px);
	width: 200px;
	height: 200px;
	opacity: 0.8;
	left: -50px;
	top: -50px;
}
.box:hover ol li:nth-child(1){
	transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	transform:rotateY(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	from {
    transform: rotateX(13deg) rotateY(360deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(13deg) rotateY(0deg) rotateZ(0deg);
  }
}


</style>
</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>
</body>
</html>

 

效果图：

未经允许不得转载：9i资源网 » 分享一个css 3d立体相册旋转源代码。
标签：

相关推荐

评论 抢沙发

评论前必须登录！

立即登录   注册

温馨提示：

随机推荐

热门标签

wordpress教程 (33)原创 (29)wordpress美化 (27)wordpress特效 (23)dux主题 (4)鼠标点击特效 (3)导航菜单图标 (2)专业变声器会员版 (2)搜书大师 (2)菜单图标旋转 (1)网站运行时间 (1)评论输入特效 (1)网页背景特效 (1)鼠标跟随吸附线条特效 (1)网站挂灯笼 (1)雪花飘落效果 (1)上传图片自动重命名 (1)加载中... (1)加载中动画 (1)加载中特效 (1)必应每日壁纸 (1)每日壁纸api (1)壁纸api接口 (1)复制添加版权信息 (1)后台加载缓慢 (1)滚动问候语 (1)不同时间段出现不同的问候语 (1)防止F12 (1)文章标题正在加载中 (1)网站标题滚动效果 (1)
×
订阅图标按钮