web前端html+css实现立体旋转相册(表白可用)

已于 2022-11-11 23:11:33 修改
阅读量2.9k 收藏 4
点赞数
分类专栏： web前端 文章标签： css 前端 html
于 2022-11-11 15:45:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xt2106119337/article/details/127806089
版权

1、主要用到的属性transform，position

1、transform:translate(X/Y/Z)() ： 向X、Y、Z轴方向做平移
2、transform:rotate(X/Y/Z)() ： 向X、Y、Z轴方向做旋转
3、transform-origin: （） ： 设置旋转轴
4、transform-style:preserve-3d ： 支持3D效果
3、position：relative ：相对定位
5、position：absolute： 绝对定位
6、perspective: 视距

2、搭建主要框架

在这里插入图片描述

首先搭建一个正方体需要6个面那么我们可以先用相对定位和觉得定位将所有图片放到同一位置。例如图中的A位置，然后将相应的图根据 绝对定位 移到相应的位置然后根据 对应的旋转轴 旋转到对应位置。比如B图需要向左移动图片A宽度的像素假设为200px那么就需要 left:-200px 的定义然后定义他的旋转轴为BA相交的线也就是右边 即 transform-origin: right 然后沿着Y轴旋转90° 即 transform:rotateY(90deg) 其他图片也做对应的处理

3、实现旋转

使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置
@keyframes myAnnimation{
	form{
	}
	to{
	}

4、代码

这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 body{
	 perspective: 800px;
 	}
	 @keyframes myAnimation {
	 from{
	 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	 }
	 to{
	 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	 }
	 }
	.container{
		width: 400px;
		height: 400px;
		margin: 1000px auto;
		position: relative;
		transform-style: preserve-3d;
		animation: myAnimation 10s infinite linear;

	}
	.container > div{
		width: 400px;
		height: 400px;
		position: absolute;
	}
	.container > div > img {
		float: left;
		width: 200px;
		height: 200px;
	}
	.container > div:nth-child(2){
		left: -400px;
		transform-origin: right;
		transform: rotateY(90deg);
	}

	 .container:hover > div:nth-child(2){
 		transform: translateX(-100px)rotateY(90deg);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(2)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container > div:nth-child(3){
		left : 400px;
		transform-origin: left;
		transform: rotateY(-90deg);
	}

	.container:hover > div:nth-child(3)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(3)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(3){
 		transform:translateX(100px) rotateY(-90deg);
 	}

	.container > div:nth-child(4){
		top:  -400px;
		transform-origin: bottom;
		transform: rotateX(-90deg);
	}

	.container:hover > div:nth-child(4)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(4)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(4){
 		transform: translateY(-100px) rotateX(-90deg);
 	}

	.container > div:nth-child(5){
		bottom : -400px;
		transform-origin: top;
		transform: rotateX(90deg);
	}
	
	.container:hover > div:nth-child(5)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(5)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container:hover > div:nth-child(5){
 		transform: translateY(100px) rotateX(90deg);
 	}
	
	.container:hover > div:last-child{
		 transform: translateZ(500px);
	}

	.container:hover > div:nth-child(6)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(6)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

 	.container:hover > div:first-child{
 		transform: translateZ(-100px);
	}

	.container:hover > div:nth-child(1)>img:nth-child(1){
 		transform: translateX(-50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(2){
 		transform: translateX(50px) translateY(-50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(3){
 		transform: translateX(-50px) translateY(50px);
 	}
 	 .container:hover > div:nth-child(1)>img:nth-child(4){
 		transform: translateX(50px) translateY(50px);
 	}

	.container > div:nth-child(6){
		transform: translateZ(400px);
	}
	</style>
</head>
<body>
	<div class="container">
	<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.s5alQa1zC-YRd_6hOj1I6AHaGI?w=198&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.0BPElpPEJvBN9aQ8w73EDAHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.SQ3NWEFNBscPLbU7Jg8GYwHaEK?w=293&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Zr5uPHLVSNguKkmIQfos_wAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.drgMM3Em68m3kcDNw-tjWQAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.dRAbgTM8_cqW-iRt9LCEBAHaGH?w=200&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.b_OQVqDrnGYibO3ts5CLBAAAAA?w=137&h=150&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.xEv7aAiKIk0onZLcCCRT2wHaFE?w=242&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.RtG_5vDB1tuDvpQhHbZ7iwHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HwcUxD_avhYsWdGrqK5kegAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="	https://tse3-mm.cn.bing.net/th/id/OIP-C.5m2QUQNO4M3vA7rIId2v-wHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.hRU2VTq-nxInfpT-s-6PVQHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.3CLkNg7Tu9fUO7MIa_R6IwHaEo?w=247&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TRhFqkkVRgSoM0SUeDnRWwAAAA?w=257&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9SD4AMFTIP4z9hhZLr6k_AAAAA?w=226&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.00QhpPLlFsVD-nVDv8qBKwAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
		<div>
	<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.lBPfaEXMhbdNizwzO154jQHaE8?w=250&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2nWl4S4HgdO1flOWVS8ksAHaEo?w=270&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.5J1TtPKNxy9toKNmID9PDgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.dAAyBtUSZzzNDnlUIW8A0AHaHa?w=178&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7">
	</div>
	</div>
</body>
</html>

5、效果展示

web旋转相册

Sept8Th
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
CSS打造图片翻转立体3D效果
m0_64642443的博客
06-12 2332
css实现图片翻转立体3D效果
HTML + CSS实现图片3D旋转效果，微信web开发
2401_83621499的博客
04-01 850
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总JavaScript前端资料汇总。
html旋转相册
2301_80177550的博客
12-23 1003
做一个旋转的3d相册。
二维旋转照片墙的html
09-24
网页制作中二维旋转照片墙，搭配同名的CSS,呈现出来的效果是：可以旋转不容角度的多张照片，照片自己放进去，有模板
HTML实现图片360度循环旋转
热门推荐
雨田哥的博客
05-09 3万+
HTML实现图片360度循环旋转效果图//css代码 .header{ -webkit-animation:rotateImg 1s linear infinite; width: 80px ; height: 80px; border: 1px solid #ccc; vertical-align: middle; }@keyframes rotateImg
纯 css 3D旋转相册 ，可自定义修改图片
08-04
纯css 3D旋转相册
html旋转相册3D效果
2302_76161836的博客
01-12 1039
选择器的联系 css样式的练习
3D旋转相册（附源码+素材）
weixin_45345143的博客
12-03 9201
3D立体选择相册制作，给你的女神最棒的效果，实现的过程都是用的win10电脑自带的软件实现的，可操作性强，无需额外安装软件。
Html 3D旋转相册制作
alicema1111的博客
01-10 1972
这篇博客针对编写代码，代码整洁，规则，易读。 学习与应用推荐首选。
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 5750
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
零基础必看的web前端HTML+CSS-视频教程网盘链接提取码下载 .txt
05-16
本课程是由浠浠呀老师为小白入门前端倾力打造的前端基础教程，是零基础小白入门前端开发的不二之选。树立前端教程新标准，全程无废话，直截了当输出干货，让你看到即学到。课程共包括 2 季，内容涵盖HTML、CSS 和 ...
web前端html+css+js实现学生信息管理系统
11-13
本资源为web课程作业，部分内容借鉴网络，侵删
HTML+CSS实现旋转立体相册
09-20
HTML+CSS实现旋转立体相册,..........................................................
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
前端培训时自己参照网易云音乐官网仿制的网站
CSS的box-shadow 用法
于坤
04-28 316
CSS的box-shadow属性是一个强大的工具，用于向框（盒子）元素添加阴影效果。它可以添加一个或多个阴影，并可以定制阴影的大小、模糊程度、颜色等。
CSS中的 5 类常见伪元素详解！
u013179804的博客
04-25 930
CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover:focus等。伪元素在 CSS 中使用两个冒号（ok，那我们一起来看看吧。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1586
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
css代码的定位及浮动
最新发布
2401_83693610的博客
04-28 338
上次，我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。
Web前端使用html+css+js实现3D樱花飘落的效果，要源码
06-12
以下是一个简单的使用 HTML、CSS 和 JavaScript 实现 3D 樱花飘落效果的源代码： ``` <!DOCTYPE html> <html> <title>3D 樱花飘落效果 body { background-color: #f2f2f2; overflow-x: hidden; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值