HTML个人相册（3d旋转）
效果：
代码：
<!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>个人相册</title>
<style>
body{
margin: 0;
padding: 0;
text-align: center;
background: url("image/bg.jpg");
background-size:cover;
}
#top{
height: 50px;
background-color: #9297be;
}
#l{
padding-top: 15px;
padding-left: 30px;
float: left;
}
#r{
padding-right: 30px;
padding-top: 15px;
float: right;
}
a:link,:visited{
text-decoration: none;
color:#000;
}
a:hover{
color:#ef6c00;
}
div.photo {
width: 250px;
height: 250px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
animation: run 15s linear infinite;
}
img {
width: 250px;
position: absolute;
backface-visibility: visible;
/* 默认值为visible，即能看见3d画面的背面，hidden看不见 */
}
@keyframes run {
0% {
transform: translate(-50%, -50%) rotateY(0deg);
}
100% {
transform: translate(-50%, -50%) rotateY(360deg);
}
}
img:nth-of-type(1) {
transform: rotateY(45deg) translatez(450px);
}
img:nth-of-type(2) {
transform: rotateY(90deg) translatez(450px);
}
img:nth-of-type(3) {
transform: rotateY(135deg) translatez(450px);
}
img:nth-of-type(4) {
transform: rotateY(180deg) translatez(450px);
}
img:nth-of-type(5) {
transform: rotateY(225deg) translatez(450px);
}
img:nth-of-type(6) {
transform: rotateY(270deg) translatez(450px);
}
img:nth-of-type(7) {
transform: rotateY(315deg) translatez(450px);
}
img:nth-of-type(8) {
transform: rotateY(360deg) translatez(450px);
}
</style>
</head>
<body>
<div id="top">
<div id="l">
欢迎XXX登录！
</div>
<div id="r">
<a href="#"><b>个人信息</b></a>
<a href="登录.html"><b>退出</b></a>
</div>
</div>
<div class="photo">
<img src="data:image/1.jpg">
<img src="data:image/2.jpg">
<img src="data:image/3.jpg">
<img src="data:image/4.jpg">
<img src="data:image/5.jpg">
<img src="data:image/6.jpg">
<img src="data:image/7.jpg">
<img src="data:image/8.jpg">
</div>
<script>
document.getElementById("l").innerHTML="欢迎"+localStorage.getItem("username")+"登录！";
</script>
</body>
</html>
HTML个人相册（3d旋转）相关推荐
- 制作一个3D旋转相册
利用HTML常用标签,CSS常用属性,JS入门语法 制作一个3D旋转相册 part one 完成<个人相册>项目登录页面 代码如下,如有需要请自行整合 #but1{ background- ...
- HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
- 3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- HTML5一个浪漫的程序猿：3D旋转爱心表白神器思路源码视频
源码/视频评论后加前端学习群470593776 javascript课题:3D旋转爱心表白神器 知识点:CSS3变换.3D场景运用,3D立方体制作技巧,爱心制作技巧, 原生js DOM操作,逻辑思维锻 ...
- 3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体 原生 JS 实现 3D 立方体 ...
- php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- matlab怎让3d旋转,如何在MATLAB中平滑旋转3D绘图？
我会说这是你正在绘制的大量积分导致经济放缓.一个选项是缩减采样..也可以使用较低级别的功能进行绘制(检查 this related post以获得plot3 / scatter3 / line性能的比 ...
- HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册 哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
最新文章
- 3.11课·········异常语句与for循环重复
- JavaScript之function类型
- Sqlserver数据库类型介绍，可作为参考书
- linux看3D实景
- 【STM32】SPI程序示例
- Marketing Cloud里contact批量删除的http负载
- Linux 从头学 01：CPU 是如何执行一条指令的？
- 洛谷P2056：[ZJOI2007]捉迷藏（点分树、STL）
- Ubuntu热键控制spotify播放和音量调节
- Sublime text 入门学习资源篇及其基本使用方法
- Vue 混合、自定义指令、插件
- linux 输入8个字母进行排序,Linux排序命令sort详解
- oracle存储空间修改,Oracle修改内存大小
- 公务员面试综合分析真题解析
- 计算机改名字sql2008不能登录,Win7电脑修改计算机名称后SQL2008数据库无法登录提示无法连接到load怎么处理...
- linux的一些命令
- 邮箱163登录入口？邮箱163注册格式是什么？
- Hyper-V配置ubuntu网络(无线有限均可)
- 计划驱动的软件过程：waterfall model（瀑布模型，或称之为SDLC模型）
- Scala 令人着迷的类设计