简单说 用CSS做一个魔方旋转的效果

FEWY FEWY 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3.8w累计阅读 3.9w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-09-08 06:51:18 发布 3.8w 阅读 AI 写同款· GEO 优化 ›
纯HTML+CSS实现3D炫酷魔方（相册） 文章目录引言：效果演示：正文：1.HTML部分CSS部分：part 1.我们先实现大盒子在页面垂直水平居中的效果：part 2.我们来设置第二大盒子，加旋转效果。part 3.将外部盒子形成正方形盒子；注意每个面在X,Y,Z轴上的旋转角度。part 3.外部六面悬浮效果：part 4.实现内部的魔方part 5.添加音乐part 6.结束展示：代码：闲聊： 注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。 引言： ​ 本周我们专业实训，实训的内容是h 阅读详情

说明

魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！

这里写图片描述

解释

我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。

效果图

这里写图片描述

代码（代码比较长，朋友们可以直接粘贴复制到电脑看效果）

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		/*最外层容器样式*/
		.wrap {
			width: 200px;
			height: 200px;
			margin: 200px;
			position: relative;
		}

		/*包裹所有容器样式*/
		.cube {
			width: 200px;
			height: 200px;
			margin: 0 auto;
			transform-style: preserve-3d;
			/* 为了方便观察，将整个魔方进行旋转 */
			transform: rotateX(-30deg) rotateY(-80deg);
		}

		.cube div {
			position: absolute;
			width: 200px;
			height: 200px;
			opacity: 0.8;
			transition: .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: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="https://img-blog.youkuaiyun.com/20170716094246620" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="https://img-blog.youkuaiyun.com/20170716094334594" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="https://img-blog.youkuaiyun.com/20170716094400013" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="https://img-blog.youkuaiyun.com/20170716094422331" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="https://img-blog.youkuaiyun.com/20170716094444434" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="https://img-blog.youkuaiyun.com/20170716094504432" class="pic" />
			</div>
		</div>
	</div>
</body>

</html>

我们来分析一下上面的代码
先说结构部分，看图
这里写图片描述

我们继续说CSS部分，主要是下面这4部分，我们说说每个部分中比较重要的
1、最外层容器样式
position: relative; ，主要是因为后面会用到position: absolute;

absolute，生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

2、包裹所有容器样式
transform-style: preserve-3d;
使被转换的子元素保留其 3D 转换：
参考链接 http://www.runoob.com/cssref/css3-pr-transform-style.html

3、定义所有图片样式
position: absolute;
让每个面先在同一个位置，方便后面转换位置
效果图
这里写图片描述

Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

上下两个面 沿X轴旋转一定角度，沿Z轴位移一定像素。
前后左右四个面 沿Y轴旋转一定角度，沿Z轴位移一定像素。
注意，后面是 先位移，再旋转，其他面是先旋转，再位移，千万别弄错顺序。

4、鼠标移入后样式
只是改变translateZ的值，将位移的距离再增加100px

到此，我们就弄出一个魔方了，至于最开始我们看到的魔方中还有嵌套一个小魔方，就很容易了，把这个魔方的六个面复制一下，然后粘贴到cube中，然后改变大小，和位移的距离就可以了。

总结

做这样的一个效果，主要是为了练习，transform，这个效果重点就是搞明白每个面要旋转多少度，然后位移的距离是一样的（不是说取值是一样的），明白了之后，做这个效果就很简单了，下方有完整的代码！需要的朋友就CV吧！

完整示例代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		/*最外层容器样式*/
		.wrap {
			width: 200px;
			height: 200px;
			margin: 200px;
			position: relative;
		}

		/*包裹所有容器样式*/
		.cube {
			width: 200px;
			height: 200px;
			margin: 0 auto;
			transform-style: preserve-3d;
			transform: rotateX(-30deg) rotateY(-80deg);
			animation: rotate linear 20s infinite;
		}

		@-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: block;
			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: rotateX(90deg) translateZ(50px);
		}

		.cube .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="https://img-blog.youkuaiyun.com/20170716094246620" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="https://img-blog.youkuaiyun.com/20170716094334594" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="https://img-blog.youkuaiyun.com/20170716094400013" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="https://img-blog.youkuaiyun.com/20170716094422331" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="https://img-blog.youkuaiyun.com/20170716094444434" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="https://img-blog.youkuaiyun.com/20170716094504432" class="pic" />
			</div>

			<!--小正方体 -->
			<span class="in_front">
				<img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
			<span class="in_right">
				<img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="https://img-blog.youkuaiyun.com/20170716120759718" class="in_pic" />
			</span>
		</div>

	</div>
</body>

</html>
收录于
前端简单说

当前文章被收录于：

前端简单说
45 篇文章 20 人学习

我们的宗旨只有一个，就是用最简单的话，讲前端最难理解的问题！！！

订阅专栏 查看详情
CSS

当前文章被收录于：

CSS
17 篇文章 1 人学习
订阅专栏 查看详情
标签
#css #魔方 #transform #3d #简单说
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
浅谈css3的3D动画效果并制作一个简单的旋转照片墙 各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。 本篇文章内容就是利用HTML简单的布局再加上CSS3的动画效果做出一个立体旋转的照片墙。效果如下图 ... 阅读详情

相关推荐

旋转魔方.html

旋转魔方（html+css+js）

李牧的博客 1153

CSS 实现一个3d魔方

👏CSS 实现一个3d魔方，速速来Get吧~

苏苏就是小苏苏的博客 1480

CSS3 3D魔方旋转动画特效

这是一款视觉效果非常不错的CSS3 3D魔方旋转动画特效，鼠标移上去外层正方体box扩散，鼠标离开又再度恢复。

如何用CSS制作可以转动的魔方

三阶魔方想要进行转动因为太过复杂，所以这里用的是2阶魔方。 首先要搭建一个魔方。利用6个div盒子不同的空间旋转，拼出一个小正方体。然后改变正方体的空间位置，一共8个小正方体拼成2阶魔方。最后给小正方体的每一个面上一个颜色。

curry_xiao的博客 1064

LangFlow开源神器：拖拽构建AI Agent与MCP协议集成实战

LangFlow 15万星开源神器：拖拽搭建 AI Agent，一键部署 API / MCP / JSON 在AI应用开发领域，传统编码方式往往需要处理复杂的API调用、数据处理和流程编排，这让很多开发者望而却步。LangFlow作为GitHub上获得15万星的开源项目，通过可视化拖拽的方式彻底改变了AI Agent的开发体验。本文将完整介绍如何使用LangFlow快速构建功能强大的AI Agent，并实现API、MCP协议和JSON配置的一键部署。 1. LangFlow与AI Agent核心概念解析 1

weixin_33717117的博客 944

MIPI video mode 和 command mode 的区别

1、何为LCD RAM? LCD 是指字面意思是液晶显示屏(Liquid Crystal Display), 而RAM: 随机存取存储器(Random-Access Memory),两者完全是风马牛不相及的东西。 下图是一个标准的LCD的爆炸图(不含TP)，请注意图中红色mark的地方:控制IC-- LCD的大脑。所谓的LCD RAM自然是指此大脑是否包含RAM. 题外话<不感兴趣的...

精诚所至 4691

用css编写一个简单的旋转魔方

其实这个就是对CSS3 transform 属性animation属性的一个简单的应用，在网页平面中创建6个面（div），让这6个面匀速的不停的旋转，要创造出来一个3d的感觉，在一个2维的网页平面上，你觉得应该怎么做呢？最直接的就是让它们在Z轴上有东西。下面这6张图片，是我随便找的狐妖小红娘中的图片，大小不是200px 200px的，我在图片属性上加了点东西，效果还不错。 代码： <!DOCTYPE html> <html lang="ch"> <head>

43612538的博客 2247

Exposure Fusion

MertensTMO原理详解： 文章：2007年Exposure Fusion 论文链接：http://ntp-0.cs.ucl.ac.uk/staff/j.kautz/publications/exposure_fusion.pdf 论文代码：C版本:https://github.com/JawThrow/ExposureFusion python版本：https://github.com/lzocro/Exposure-Fusion matlab版本：https://github.com/Mericam

大长腿不解释 1653

HTML+CSS实战操作旋转魔方

硬核！HTML+CSS实战操作旋转魔方

ztK63LrD的博客 3584

MacOS M芯片部署ComfyUI：从环境排雷到插件生态一站式指南

本文为MacOS M系列芯片用户提供了一份详尽的ComfyUI部署指南。文章深入剖析了因架构差异导致的常见安装报错根源，并给出了基于MPS后端的正确PyTorch安装命令。从创建纯净Python虚拟环境、分步安装依赖，到验证GPU加速，手把手指导完成部署。同时，还推荐了包括管理器、汉化在内的必备插件，以完善使用生态，帮助用户一站式解决从环境搭建到效率提升的所有问题。

weixin_29261711的博客 994

esxi8.0.3如何添加USB外置硬盘

本文介绍了在ESXi系统中配置外置USB硬盘作为数据存储的完整步骤：1）通过SSH禁用USB仲裁服务并关闭自启；2）识别已连接的USB硬盘设备路径；3）使用partedUtil创建GPT分区表并计算扇区范围；4）设置VMFS6分区并格式化。关键命令包括停止usbarbitrator服务、partedUtil分区操作以及vmkfstools格式化命令。整个过程需通过SSH执行，最终将USB硬盘配置为名为"USB_Datastore"的VMFS6存储设备。

qq_41683719的博客 1546

html魔方转动效果,简单说 用CSS做一个魔方旋转的效果

说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。效果图 代码(代码比较长，朋友们可以直接粘贴复制到电脑看效果)/*最外层容器样式*/.wrap {width: 200px;h...

weixin_42129412的博客 711

剪映自动化工具来了：AI帮你自动剪辑成片

🎬分享一个剪映自动化剪辑工具！AI 自动帮你完成从写文案、配音、加字幕、选音乐、上特效到最终导出的整套流程🎈

XiaoqiangClub的博客 858

CSS旋转魔方

CSS旋转魔方 我想做一个相册，把儿子的照片放进去，外面是我，里面是他。可是苦逼程序员爱而不得，终日与编辑器为伍，日码万字不能休。 一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。 不说了，上源码： <!DOCTYPE html>

weixin_45820444的博客 5807

uniapp [微信小程序] - 详解微信小程序端接入mqtt全流程及示例源码教程，uniApp微信小程序端如何接入MQTT插件并实现连接/断开+发布订阅+消息队列+离线重连等各种示例代码（开箱即用）

uniapp微信小程序接入MQTT，uniapp中使用mqtt，uniapp 微信小程序端接入mqtt示例代码教程，适用于微信小程序的MQTT插件，uniapp开发微信小程序连接mqtt，uniApp微信小程序接入MQTT协议，uniapp vue3微信小程序使用MQTT的小例子接入流程，使用uniapp开发小程序接入mqtt，如何在uniapp项目中使用mqtt，uniapp mqtt的使用示例，mqtt连接报错，如何在项目里集成mqtt，Mqtt协议，主动连接mqtt，订阅消息，实现发布，订阅和接收消息

🏆 前端领域优质创作者 2884

信奥赛csp初赛高频考点【位运算】（详细解析）

信奥赛csp初赛高频考点【位运算】（详细解析）

王老师青少年编程 371

HTML表白器---做一个魔方旋转的效果

说明 魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释 我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。 代码： <!DOCTYPE html> <html> <h...

风吹屁屁凉 5287

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

每天一个JavaScript小特效——会魔法的旋转魔方相册

用html、css、JavaScript做的小特效 实现功能： 点击下方图片可翻转到对应图片实现思路：魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折

weixin_62542181的博客 4314

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

HTML+CSS+JS实现简单的魔方

3天把JS过了一遍，因为网课太水就没能继续看下去，我知道这远远不够，计划研究JavaScript编程艺术，在此之前，先来一个小设计熟悉JS编程习惯： 案例介绍： 设计一个不停旋转的4阶魔方，魔方每一个面的方格能够依次飞出原位置，稳定在一个大的范围，紧接着旋转 恢复原位。魔方之下有一个圆形的发光区域。 HTML部分： HTML部分主要是结构，包括了三个部分，魔方之下的圆形区域主容器contain...

One of thre_tigers的博客 1万+

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

CSS实现旋转魔方

HTML+CSS实现立体旋转魔方

小天才程序员的博客乐园 3511

用CSS实现3D魔方动画旋转

这篇博客是关于一个动态3D魔方的实现，主要分成两个部分，一个是3D魔方的制作，另一个是关于一个动画效果

Yvan_Lin的博客 3514

纯CSS做3D旋转魔方

-包裹所有元素的容器-->143 <!--前面图片 -->147 <!--后面图片 -->151 <!--左面图片 -->155 <!--右面图片 -->159 <!--上面图片 -->163 <!--下面图片 -->168 <!--小正方体 -->-- 外层最大容器 -->千行代码，Bug何处藏。

2403_88477236的博客 976

CSS做3D旋转魔方（立方体）

css做3D旋转魔方，使用的是3D位移与旋转属性，以及动画属性。代码不多，以下便是全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...

qq_38318589的博客 1257

js和css3实现动态魔方的效果

主要是利用css3动画和js实现了一个动态的魔方效果。

~~~ 2893

CSS实现简单的3D旋转魔方

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: yellow; } /*最外层样式*/ .wrap{ width: 200px;...

weixin_44269204的博客 1991
上一篇： 简单说 正则表达式——要注意lastIndex属性
下一篇： 简单说 CSS的vertical-align
点赞 23
评论 16
书签 书签 64
FEWY
FEWY 领域专家: 前端开发技术领域 领域专家: 前端开发技术领域
博客等级 码龄10年 504粉丝 77原创
+ 关注 专栏目录 订阅专栏
评论 16
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值