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

最新推荐文章于 2024-09-18 14:27:22 发布
最新推荐文章于 2024-09-18 14:27:22 发布
阅读量3.8w 收藏 64
点赞数 23
分类专栏： CSS 前端简单说 文章标签： css 魔方 transform 3d 简单说
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FE_dev/article/details/75142505
版权

说明

魔方大家应该是不会陌生的，这次我们来一起用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.csdn.net/20170716094246620" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="https://img-blog.csdn.net/20170716094334594" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="https://img-blog.csdn.net/20170716094400013" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="https://img-blog.csdn.net/20170716094422331" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="https://img-blog.csdn.net/20170716094444434" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="https://img-blog.csdn.net/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.csdn.net/20170716094246620" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="https://img-blog.csdn.net/20170716094334594" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="https://img-blog.csdn.net/20170716094400013" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="https://img-blog.csdn.net/20170716094422331" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="https://img-blog.csdn.net/20170716094444434" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="https://img-blog.csdn.net/20170716094504432" class="pic" />
			</div>

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

	</div>
</body>

</html>
FEWY
关注
专栏目录
CSS3简单魔方动画效果
Inory_ye的博客
12-26 470
一 二、 1. 2. <font color=#999AAA
HTML表白器---做一个魔方旋转的效果
zhf_123666的博客
12-06 720
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> /*最外层容器样式*/ .wrap { width: 200px; height: 200px; ...
CSS动画之旋转魔方轮播
weixin_33739541的博客
04-26 495
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节。 在我自己写完这篇文章的时候, 才觉得CSS确实能够实现很多炫酷的效果。 本篇文章demo的完成自己也是查了很多相关知识点和借鉴了一些文章中的内容。但不管怎样...
CSS3D魔法——旋转魔方
最新发布
2401_87196188的博客
09-18 1419
* 规定鼠标指向魔方的时候规定动画是否正在运行或暂停 默认是running，暂停是paused */我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。大家一起用自己喜欢的idol图片做一个酷炫的魔方吧！先来看看静止状态下的效果图，别急，更好看的在下面！X轴：水平向右（注意：X往右边是正值，往左边是负值）Y轴：垂直向下（注意：Y往下面是正值，往上面是负值）Z轴：垂直屏幕（注意：往外面是正值，往里面是负值）/* 透视写在被观察元素的父盒子上面的 */
html魔方转动效果,简单说 用CSS做一个魔方旋转的效果
weixin_42129412的博客
06-03 612
说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。效果图 代码(代码比较长，朋友们可以直接粘贴复制到电脑看效果)/*最外层容器样式*/.wrap {width: 200px;h...
CSS旋转魔方
weixin_45820444的博客
09-02 5566
CSS旋转魔方 我想做一个相册，把儿子的照片放进去，外面是我，里面是他。可是苦逼程序员爱而不得，终日与编辑器为伍，日码万字不能休。 一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。 不说了，上源码： <!DOCTYPE html>
CSS3魔方旋转图片切换展示特效
07-14
总结来说，“CSS3魔方旋转图片切换展示特效”是一种结合了3D变换、过渡和动画的高级CSS技术，通过这些技术可以创建出引人入胜的网页互动元素，提升用户体验。在实践中，开发者需要熟练掌握CSS3的相关知识，同时注意...
H5+CSS3设计的旋转超酷魔方
03-17
同时，CSS3的过渡（transitions）、动画（animations）和3D转换（transformations）是实现魔方旋转的关键。 3. **CSS3 3D转换**： CSS3的3D转换使得元素可以在三维空间中移动、缩放和旋转。在魔方的实现中，每个面...
css魔方效果
03-27
总的来说，"css魔方效果"是一个展示CSS3强大功能的优秀示例，它涵盖了3D变换、动画、定位以及交互等多个方面的技术。熟练掌握这些知识点，不仅可以创建出引人入胜的网页交互效果，还能提升对CSS3深度理解和运用的...
CSS3 3D魔方旋转动画代码
05-01
总结来说，"CSS3 3D魔方旋转动画代码"是一种结合了CSS3 3D变换、交互和动画效果的网页设计技术。它展示了CSS3的强大功能，可以创造出引人入胜的用户体验。通过学习和掌握这些技巧，开发者能够为网站添加更多互动性和...
CSS3 3D魔方旋转动画特效
06-11
本教程将深入探讨如何利用CSS3实现一个3D魔方旋转动画特效。 首先，我们关注的是“3D变换”（3D Transform）特性，这是CSS3中的一个关键概念。它允许我们对元素进行三维空间的操作，如旋转（rotateX, rotateY, ...
如何用CSS制作可以转动的魔方
curry_xiao的博客
05-03 940
三阶魔方想要进行转动因为太过复杂，所以这里用的是2阶魔方。 首先要搭建一个魔方。利用6个div盒子不同的空间旋转，拼出一个小正方体。然后改变正方体的空间位置，一共8个小正方体拼成2阶魔方。最后给小正方体的每一个面上一个颜色。
旋转魔方css
qq_61662856的博客
06-05 209
一个简单动画
CSS实现旋转魔方
小天才程序员的博客乐园
08-27 3208
HTML+CSS实现立体旋转魔方
前端HTML CSS JS编写转动魔方，附上照片，加上bgm按钮，实现炫酷效果.
m0_58047199的博客
04-15 2719
用html css js编写一个魔方，可以转动，飞走飞回来，并在浏览器本地运行。
运用css设计简单3D魔方
LiHang1234567777的博客
07-22 300
本文介绍了css简单魔方样式的基础内容。一、对于3D的理解图二、使用步骤*{margin0;padding0;}html{width100%;height100%;}body{width100%;height100%;displayflex;center;center;}section{width150px;height150px;positionrelative;animation}
用css编写一个简单的旋转魔方
丁七岁的博客
09-24 2145
其实这个就是对CSS3 transform 属性animation属性的一个简单的应用，在网页平面中创建6个面（div），让这6个面匀速的不停的旋转，要创造出来一个3d的感觉，在一个2维的网页平面上，你觉得应该怎么做呢？最直接的就是让它们在Z轴上有东西。下面这6张图片，是我随便找的狐妖小红娘中的图片，大小不是200px 200px的，我在图片属性上加了点东西，效果还不错。 代码： <!DOCTYPE html> <html lang="ch"> <head>
css 魔方,css 3d旋转魔方
weixin_42217306的博客
08-04 209
/*魔方*/.mofang {width:60px;height:60px;margin:0 auto;position:fixed;z-index:999;-webkit-perspective:1000px;perspective:1000px;right:0;bottom:0;-webkit-transform:translate(-80%,-80%);transform:translate...
打造酷炫图片展示：CSS3魔方旋转特效
在魔方旋转图片切换特效中，过渡效果通常用于平滑地从一个状态过渡到另一个状态，增强视觉上的动态效果。 3. 伪元素和容器选择器（Pseudo-elements and Container Selectors）：CSS3的伪元素（如:before和:after）...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值