Web前端实现3D旋转魔方相册【超详细】

已于 2023-04-23 23:52:02 修改
阅读量1.5k 收藏 23
点赞数 3
分类专栏： Other 文章标签： 前端 3d css3
于 2022-05-25 10:33:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40670171/article/details/124959909
版权

文章目录

前言

例如：3D旋转魔方相册，表白神器！

3D旋转魔方效果图

提示：以下是本篇文章正文内容，下面案例可供参考

一、html代码

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<link type="text/css" href="YoungerSister.css" rel="stylesheet ">
		<title>YoungerSister</title>
		<style>
			<pre name="code"class="css">* {
				padding: 0;
				margin: 0;
			}

			body {
				width: 100%;
				height: 100%;
				background: #333;
			}

			#react {
				width: 400px;
				height: 400px;
				margin: 400px auto;
				transform-style: preserve-3d;
				animation: rotate 20s infinite;
				animation-timing-function: linear;
			}

			#react div {
				position: absolute;
				transition: all .4s;
			}

			div .out_pic {
				width: 400px;
				height: 400px;
				opacity: 0.9;
			}

			div .in_pic {
				width: 200px;
				height: 200px;
			}

			#react span {
				display: block;
				position: absolute;
				width: 200px;
				height: 200px;
				top: 50px;
				left: 50px;
			}

			@keyframes rotate {
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}


			.out_front {
				transform: translateZ(200px);
			}

			.out_back {
				transform: translateZ(-200px);
			}

			.out_left {
				transform: rotateY(90deg) translateZ(200px);
			}

			.out_right {
				transform: rotateY(-90deg) translateZ(200px);
			}

			.out_top {
				transform: rotateX(90deg) translateZ(200px);
			}

			.out_bottom {
				transform: rotateX(-90deg) translateZ(200px);
			}

			.in_front {
				transform: translateZ(50px);
			}

			.in_back {
				transform: translateZ(-50px);
			}

			.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);
			}

			/*外面的图片散开*/
			#react:hover .out_front {
				transform: translateZ(400px);
			}

			#react:hover .out_back {
				transform: translateZ(-400px);
			}

			#react:hover .out_left {
				transform: rotateY(90deg) translateZ(400px);
			}

			#react:hover .out_right {
				transform: rotateY(-90deg) translateZ(400px);
			}

			#react:hover .out_top {
				transform: rotateX(90deg) translateZ(400px);
			}

			#react:hover .out_bottom {
				transform: rotateX(-90deg) translateZ(400px);
			}


			/*里面的图片散开*/
			#react:hover .in_front {
				transform: translateZ(200px);
			}

			#react:hover .in_back {
				transform: translateZ(-200px);
			}

			#react:hover .in_left {
				transform: rotateY(90deg) translateZ(200px);
			}

			#react:hover .in_right {
				transform: rotateY(-90deg) translateZ(200px);
			}

			#react:hover .in_top {
				transform: rotateX(90deg) translateZ(200px);
			}

			#react:hover .in_bottom {
				transform: rotateX(-90deg) translateZ(200px);
			}
		</style>
	</head>
	<body>
		<div id="react">
			<div class="out_front">
				<img src="001.jpg" class="out_pic">
			</div>
			<div class="out_back">
				<img src="002.jpg" class="out_pic">
			</div>
			<div class="out_left">
				<img src="003.jpg" class="out_pic">
			</div>
			<div class="out_right">
				<img src="004.jpg" class="out_pic">
			</div>
			<div class="out_top">
				<img src="005.jpg" class="out_pic">
			</div>
			<div class="out_bottom">
				<img src="006.jpg" class="out_pic">
			</div>
			<span class="in_front">
				<img src="007.jpg" class="in_pic">
			</span>
			<span class="in_back">
				<img src="008.jpg" class="in_pic">
			</span>
			<span class="in_left">
				<img src="009.jpg" class="in_pic">
			</span>
			<span class="in_right">
				<img src="010.jpg" class="in_pic">
			</span>
			<span class="in_top">
				<img src="011.jpg" class="in_pic">
			</span>
			<span class="in_bottom">
				<img src="012.jpg" class="in_pic">
			</span>
		</div>
	</body>
</html>

二、css代码

*{
    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: #57faff;
 
}
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-right: 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(../img/01.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
    background: url(../img/02.png) no-repeat 0 0;
    -webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
    background: url(../img/03.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
    background: url(../img/04.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
    background: url(../img/05.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
    background: url(../img/06.png) no-repeat 0 0;
    -webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
    background: url(../img/1.png) no-repeat 0 0;
    -webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
    background: url(../img/2.png) no-repeat 0 0;
    -webkit-transform:rotateX(180deg) translateZ(50px);
}
.maxbox li:nth-child(3){
    background: url(../img/3.png) no-repeat 0 0;
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
    background: url(../img/4.png) no-repeat 0 0;
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
    background: url(../img/5.png) no-repeat 0 0;
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
    background: url(../img/6.png) 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: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top:-100px;
}
.box:hover ol li:nth-child(2){
    -webkit-transform:rotateX(180deg) translateZ(300px);
    width: 400px;
    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: 400px;
    height: 400px;
    opacity: 0.8;
    left: -100px;
    top:-100px;
}
.box:hover ol li:nth-child(6){
    -webkit-transform:rotateY(90deg) translateZ(300px);
    width: 400px;
    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);
    }
}

三、放上照片

在这里插入图片描述
提示：照片和html、css文件放在一个文件夹。

啸啸说
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
web前端：3d立体旋转+源码+详解
成长的嘻嘻哥
12-23 1723
简单，不花哨
每天一个JavaScript小特效——会魔法的旋转魔方相册
weixin_62542181的博客
06-13 3587
用html、css、JavaScript做的小特效 实现功能： 点击下方图片可翻转到对应图片实现思路：魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折
前端小项目（三）| 魔方魔方（html、css、js）
qq_43248263的博客
12-05 1504
文章目录前言一、HTML二、CSS三、JavaScript 前言 MOOC课程的实践项目，做一个魔方~ 效果长这样~魔方在自主转动，且每个面的小方块可以飞走飞回。 代码放在：https://github.com/titibabybaby/FED/tree/main/rubik’s%20Cube 一、HTML 魔方是一个正方体，所以我们首先构造一个正方体。 html体现整个结构，都是div标签来表现的，整个container下有个box，box下有六个div，表示魔方的六个面。 <div clas
Web前端最全带你使用vue为女朋友编写一个旋转相册_vue 3d 相册，2024年最新前端面向对象
最新发布
2401_84619986的博客
05-17 227
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心。
CSS学习案例（11）：3D堆叠图片ui布局特效
Rengarhunt的博客
12-03 532
<div class="container"> <div class="food-card"> <div class="pic"> <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/1.jpg" alt="Pizza"> </div> &lt..
3D旋转魔方
12-29
3D旋转魔方，实现按键控制魔方的旋转，含花式旋转和自动复原等功能，VS可直接运行(要配置相关OpenGL库）
3D立体旋转相册.zip
08-30
抖音上那些炫酷的网页特效。这是一个3D的旋转相册代码，使用纯CSS编写
樱花雨3d魔方旋转相册
09-17
"樱花雨3D魔方旋转相册"是一个利用三维效果展示照片的互动应用。这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目...
web前端——好玩的魔方.zip
12-04
在Web前端开发中，"好玩的魔方"项目是一个典型的交互式应用，它结合了HTML、CSS和JavaScript等核心技术...如果你对这个领域感兴趣，不妨尝试自己动手实现一个动态的Web前端魔方，相信这会是一次非常有价值的学习经历。
js实现3D旋转相册
11-19
本文实例为大家分享了js实现3D旋转相册的具体代码，供大家参考，具体内容如下 效果展示： 使用图片： 剩余自己随意 图片大小为133*200 代码展示： <!DOCTYPE html> <!--设置图片的拖拽事件 不可用--> &...
JavaScript实现的3D旋转魔方动画效果实例代码
10-16
在本文中，我们将探讨如何使用JavaScript来实现一个3D旋转的魔方动画效果。这个实例代码展示了一种高效且简洁的方法，将3D魔方的各个面动态展示出来，并允许进行旋转操作。以下是对实现这一效果的关键知识点的详细...
相册三维立体旋转
05-23
如何制作三维立体旋转的相册，让你能拥有奇妙的相册。
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
旋转相册网页设计
11-13
该相册页面制作是老师讲课的例子，主要是网页前端设计，HTML语言和js
java 3D 魔方源代码带图片
05-16
MoFang-2006-9-18修正版源代码,已测试通过,可以试用,要运行错误有可能是内存太低和环境配置错误!
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
3D模型--百行代码实现旋转立体魔方
01-31
1.4.0魔方分为6个面，每个面由9个小矩形组成，现在我把每个小矩形当做一个类封装起来，因为现在建立的是一个3D魔方，所以要画出每个小矩形，需要知道小矩形的4个定点，而这4个定点会根据空间的旋转角度而变换，所以...
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8905
html+css小练手
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...
h5实现旋转魔方相册
05-24
实现旋转魔方相册，可以考虑以下步骤： 1. 创建一个容器，用于放置魔方相册。 2. 将魔方相册拆分成 6 个面。每个面都是一个独立的图片或者容器。 3. 使用 CSS3 3D 变换（transform3d）和过渡（transition）属性，将每个面沿着魔方的边缘进行旋转。 4. 使用 JavaScript 监听用户的交互事件，例如鼠标点击、拖动等，根据用户的操作改变魔方相册的状态，从而实现旋转和翻转等效果。 下面是一个简单示例代码，实现了一个基本的旋转魔方相册： HTML 代码： ```html <div class="cube"> <div class="cube__item cube__item--front"></div> <div class="cube__item cube__item--back"></div> <div class="cube__item cube__item--right"></div> <div class="cube__item cube__item--left"></div> <div class="cube__item cube__item--top"></div> <div class="cube__item cube__item--bottom"></div> </div> ``` CSS 代码： ```css .cube { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: transform 1s; } .cube__item { position: absolute; width: 200px; height: 200px; background-size: cover; border: 1px solid white; } .cube__item--front { transform: translateZ(100px); background-image: url(front.jpg); } .cube__item--back { transform: translateZ(-100px) rotateY(180deg); background-image: url(back.jpg); } .cube__item--right { transform: rotateY(-90deg) translateZ(100px); background-image: url(right.jpg); } .cube__item--left { transform: rotateY(90deg) translateZ(100px); background-image: url(left.jpg); } .cube__item--top { transform: rotateX(90deg) translateZ(100px); background-image: url(top.jpg); } .cube__item--bottom { transform: rotateX(-90deg) translateZ(100px); background-image: url(bottom.jpg); } .cube:hover { transform: rotateX(360deg) rotateY(360deg); } ``` JavaScript 代码： ```javascript const cube = document.querySelector('.cube'); let isDragging = false; let startX, startY, currentX, currentY; cube.addEventListener('mousedown', (e) => { isDragging = true; startX = e.pageX; startY = e.pageY; }); cube.addEventListener('mousemove', (e) => { if (!isDragging) return; currentX = e.pageX; currentY = e.pageY; const dx = currentX - startX; const dy = currentY - startY; cube.style.transform = `rotateX(${dy * -0.2}deg) rotateY(${dx * 0.2}deg)`; }); cube.addEventListener('mouseup', () => { isDragging = false; }); ``` 这段 JavaScript 代码实现了鼠标拖动旋转魔方相册的功能。当用户按下鼠标左键时，记录下当前的坐标。当用户移动鼠标时，计算出鼠标移动的距离，根据距离改变魔方相册的旋转角度。当用户松开鼠标时，停止旋转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

啸啸说

你的鼓励将是我创作的最大力

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

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

打赏作者

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

抵扣说明：

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

余额充值