用HTML搭建3D立体相册网页，可放大缩小

最新推荐文章于 2024-04-28 15:06:30 发布
最新推荐文章于 2024-04-28 15:06:30 发布
阅读量1.5k 收藏 15
点赞数 4
分类专栏： 前端 文章标签： html5 html vue.js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46540738/article/details/116674178
版权

在这里插入图片描述在这里插入图片描述

        HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

</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>

        CSS代码：

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{

	/*background: url(../img/preview.png) ;*/
	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;
}
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%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../imga/01.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../imga/02.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../imga/03.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../imga/04.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../imga/05.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../imga/06.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../imga/1.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../imga/2.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../imga/3.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../imga/4.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../imga/5.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../imga/6.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 600px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 600px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 600px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 600px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

        图片的话，根据自己喜好放自己喜欢的图片即可。

梦梦~~
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
HTML实现酷炫3D相册
算法与编程之美
07-16 4106
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！1、创建文件目...
Python实例：3D旋转图片
weixin_42397177的博客
07-14 7482
style代码： @charset "utf-8"; *{ margin:0; padding:0; } body{ /*background: url(../img/preview.png) ;*/ max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-re...
超级炫酷的3D旋转动态图——Python代码实现
weixin_46039719的博客
10-11 5728
今天这篇文章我准备了很久，但是运行出来很值得。属于散漫闲谈，毕竟涉及到一个浪漫的思想系统，故建议读者按目录次序逐一浏览，免得骤然跌入幽暗的迷宫找不到来时的路，它不足为你揭示全部问题的答案，但若能让人胸中升起一朵朵疑云，也未尝不会酿成晚霞斑斓的别一番景致，万一它居然给你带来了一场精神世界的苦雨，那就借机洗刷一下原来存放在那儿的“躺平”上的尘埃吧。或许，雨过云收，神驰的天地更清朗.......
html3D创意相册附源码_html相册源码(2)
最新发布
2401_84419009的博客
04-28 1087
})().load({ imgdata:[ // north {img:‘imgs/1.jpg’, x:-1000, y:0, z:1500, nx:0, nz:1}, {img:‘imgs/2.jpg’, x:0, y:0, z:1500, nx:0, nz:1}, {img:‘imgs/3.jpg’, x:1000, y:0, z:1500, nx:0, nz:1}, // east {img:‘imgs/4.jpg’, x:1500, y:0, z:1000, nx:-1, nz:0},
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6207
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
python三维图视角旋转_python – 图像上的3d旋转
weixin_39599654的博客
11-23 2250
首先,构建表单的旋转矩阵[cos(theta) -sin(theta) 0]R = [sin(theta) cos(theta) 0][0 0 1]应用此坐标变换可以围绕原点进行旋转.相反,如果要围绕图像中心旋转,则必须先移动图像中心到原点,然后应用旋转,然后将所有东西都移回去.你可以用一个翻译矩阵：[1 0 -image_width/2]T...
HTML5搭建3D立体相册网站
01-16
放大和缩小照片的功能通常通过调整3D对象的大小来实现，可以使用THREE.Object3D的scale属性。开发者可以监听用户的滚轮事件或捏合手势，动态地改变对象的缩放比例。 此外，为了让相册看起来更加真实和互动，还可以...
HTML3D旋转相册网页设计
12-30
HTML3D旋转相册网页设计是一种利用现代Web技术构建的互动式图像展示方式，它将传统的静态相册转变为三维立体的动态体验。这种设计能够吸引用户的注意力，提供更丰富的用户体验，尤其是在产品展示、个人作品集或者...
Python+前端html、css美化综合+博客首页网页搭建
05-14
本资源主要是利用html语言和css语言搭建了博客园首页的示例网页页面 对前端html和css所有的知识进行复习运用 通过搭建项目的方式熟悉Python搭建前端的知识 适用于在对前端开发学习的伙伴，通过示例代码的方式理解和...
HTML+CSS搭建的新闻网页
09-07
初步学习HTML的同学可以参考学习一下，HTML+CSS搭建的新闻网页
用两台液晶显示器搭建3D立体显示系统.docx
09-27
用两台液晶显示器搭建3D立体显示系统 该文档介绍了使用两台液晶显示器搭建3D立体显示系统的方法。该方法可以让用户在家中使用3D方式观看电影、玩游戏，且成本较低。 首先，文章介绍了使用红青眼镜和NVIDIA驱动的...
html+css3三维立体相册
12-14
一个三维立体的相册,可以拖拽图片进去和旋转立体模型,有一个良好三维效果的相册,如果你正在学习css3三维空间，可以学习下，欢迎交流~~
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
weixin_31935793的博客
06-04 5363
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考，具体如下：今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。方法一：使用js和css3效果如图：这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：网易图片动画div.img {width: ...
vue中渲染html，并对里面的图片进行放大缩小各种操作
weixin_49519788的博客
08-19 617
vue对渲染的html中的图片进行操作
HTML+CSS+JS实现 ❤️520爱心背景表白网页动画特效❤️
java李阳勇的博客
09-06 3762
效果演示： 代码目录： 主要代码实现： 部分HTML代码 : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>好朋友-相册</title> <link rel="stylesheet" href=...
python三维图视角旋转_图像几何变换之图像旋转（Python实现）
weixin_39854326的博客
11-20 2514
图像几何变换之图像旋转原理旋转变化——极坐标表示设点P0(x0,y0)旋转θ角后对应点为P(x,y)。对于两点坐标可以这样表示：x0=R*cosαy0=R*sinαx=R*cos(α-θ)= x0 *cosθ + y0 *sinθy=R*sin(α-θ)= -x0 *sinθ+ y0 *cosθ以矩阵形式表示为：1.png下面我们来看看更通常一点的做法：以图像的中心为圆心进行旋转。这里涉及到一个坐...
手把手教你基于HTML、CSS搭建我的相册（下）
官方推荐
03-22 1万+
利用HTML、CSS搭建我的相册
【3D相册】零基础完成3D相册并配上背景音乐
一名在读学生
04-26 4369
文章目录一、前言二、准备工作1、新建文件夹2、准备素材对于图片的处理对于音乐的处理三、代码工作1、python处理6张图片1.1代码运行1.2 放入背景图片2、写html文件2.1 更换音乐素材3、运行main.html四、推荐阅读 一、前言 帮助好哥们整的一个小相册，给他写个教程帖 大致效果如下（动图超图片上传上限了）： 二、准备工作 1、新建文件夹 如：我在D盘中新建一个 3D相册 文件夹，然后在 3D文件夹 中 新建2个文件夹：img ， main 其中： img：放素材图片 ma
CSS3通过3D变换立体旋转相册
热门推荐
kun的博客
11-23 3万+
图片镇楼：      声明：本来想做一个多面体相册的，但是在网上没有找到例子，最终完整代码是在一个英文程序网站上copy的，但是没有解释，我把大体实现流程解释了一遍，旋转真的是绕蒙我了····代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二十面体&lt;/title&gt; &lt;style type="t...
用html搭建个人网页
06-06
好的，以下是使用 HTML 搭建个人网页的基本步骤： 1. 编写 HTML 代码：在文本编辑器中编写 HTML 代码，包括网页的整体结构、内容、样式等。可以参考一些 HTML 教程，学习 HTML 的基本语法和标签。 2. 创建网页文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦梦~~

你的鼓励是对我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值