用CSS+HTML代码制作的3D动态旋转相册

CSS代码

html{background:black;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:rotateY(90deg) translateZ(50px);
}
.cube.in_bottom{transform:rotateY(-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);
}

HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我爱她</title><style type="text/css">html{background:black;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);}span{display:block;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}    .in_pic{width: 100px;height: 100px;}.in_front{transform: rotateY(0deg) translateZ(50px) ;}.in_back{transform:translateZ(-50px)  rotateY(180deg);}.in_left{transform:rotateY(90deg) translateZ(50px);}.in_right{transform:rotateY(-90deg) translateZ(50px);}    .in_top{transform:rotateX(90deg) translateZ(50px);}    .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);}</style></head><body><div class="wrap"><div class="cube"><div class="out_front"><img src="img/1.jpg" class="pic" ></div><div class="out_back"><img src="img/2.jpg" class="pic"></div><div class="out_left"><img src="img/3.jpg"class="pic" ></div><div class="out_right"><img src="img/4.jpg"class="pic" ></div><div class="out_top"><img src="img/5.jpg"class="pic" ></div><div class="out_bottom"><img src="img/6.jpg"class="pic" ></div><span class="in_front"><img src="img/7.jpg"class="in_pic" ></span><span class="in_back"><img src="img/8.jpg"class="in_pic" ></span><span class="in_left"><img src="img/9.jpg"class="in_pic" ></span><span class="in_right"><img src="img/10.jpg" class="in_pic"></span><span class="in_top"><img src="img/11.jpg" class="in_pic" ></span><span class="in_bottom"><img src="img/12.jpg"class="in_pic" ></span></div></div></body>
</html>

代码效果

用CSS+HTML代码制作的3D动态旋转相册相关推荐

旋转立体相册制作html,用CSS3制作3D动态旋转相册
最近做一个网站,想弄一个炫酷的效果,所以想到了用CSS3做一个图片3D旋转的效果.[实际就是做一个3D动态旋转相册,自己发挥哦] 下面直接上代码了. -------------------start- ...
js制作3d立体旋转相册
使用js做一个3d立体旋转相册可自由拖拽源码如下 <!DOCTYPE html> <html> <head> <meta charset="ut ...
3d立方体旋转相册（转载）
抖音上要到的效果第一步:新建txt文件第二步:把以下代码复制到txt文件中,并保存 <!DOCTYPE html> <html><head><meta c ...
C3+H5小案例 | 03 3D立体旋转相册
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗？（纪念日的小浪漫）
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
HTML 3d立体旋转相册
效果:(实际是动态旋转) 目录:(根据自己需要替换图片就行了大照片是400*400 小照片是100*100) 提取码:1122 代码链接 index.html <!DOCTYPE html&g ...
Ios精品源码，tableview下载视频直播源播放器图片位置3D立体旋转相册屏风动画
1.tableview的展开收起以及cell的选中未选中源码 2.ios后台下载视频 3.直播源播放器-电视台,乐视直播,熊猫直播,电视剧轮播,电影等 4.自定义文本图片位置源码持续更新求star ...
Ios精品源码，tableview下载视频直播源播放器图片位置3D立体旋转相册屏风动画...
2019独角兽企业重金招聘Python工程师标准>>> 1.tableview的展开收起以及cell的选中未选中源码 2.ios后台下载视频 3.直播源播放器-电视台,乐视直播,熊猫 ...
3d正方体旋转相册代码_3d旋转正方体的多种html和css制作方法和相关知识复习讲解
1 说明: 1.1 推荐指数:★★★★ 1.2 有点长,适合收藏,慢慢仔细阅读和分析代码. 1.3 推荐:谷歌浏览器和微软vscode编辑器. 1.4 部分代码来源于免费开源的网络,具体不详,经自己加 ...
HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页简单的3D相册制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

用CSS+HTML代码制作的3D动态旋转相册

用CSS+HTML代码制作的3D动态旋转相册相关推荐

最新文章

热门文章