纯CSS实现3D正方体动画效果

最新推荐文章于 2023-02-08 11:18:36 发布
最新推荐文章于 2023-02-08 11:18:36 发布
阅读量1.5k 收藏 10
点赞数 2
文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45947497/article/details/108926075
版权

目录

前言

正文

1.基本架构

2.书写每个div样式

3.为需要产生动画的一面单独设置样式

4.设置鼠标hover效果

5.优化

总结


前言

纯CSS实现3D正方体动画效果，此方法是通过transform的旋转（rotate）和位移（translate）实现的，具体效果是鼠标滑过时正方体的一个面会产生位移

效果图

正文

1.基本架构

先在body里添加div作为参考，再在这个div里添加六个div，分别代表正方体的六个面

<div class="cube">
	<div class="cube-3D">
		<div class="front">前</div>
		<div class="rear">后</div>
		<div class="left">左</div>
		<div class="right">右</div>
		<div class="top">上</div>
		<div class="foot" >下</div>
	</div>
</div>


2.书写每个div样式

.cube {
		height: 300px;
		width: 240px;
		text-align: center;
		float: left;
	}


.cube-3D {
		width: 41px;
		height: 41px;
		margin: auto;
		margin-top: 50px;
		text-align: center;
		transform: rotateX(45deg) rotateY(-45deg);
		transform-style: preserve-3d;
		font-size: 0;
	}


.cube-3D div {
		width: 41px;
	    height: 41px;
		position: absolute;
		left: 0;
		top: 0;
		/* opacity: 0.5; */
		background-color: white;
		border: 0.5px solid #82C14C;
		transition: 0.6s;
	}


.front {transform: translateZ(21px);}


.rear {transform: translateZ(-21px);}


.left {transform: translateX(-21px) rotateY(-90deg);}


.right {transform: translateX(21px) rotateY(-90deg);}


.top {transform: translateY(-21px) rotateX(90deg);}


.foot {transform: translatey(21px) rotateX(-90deg);}

效果：

可以先将cube-3D下的div设置透明度，方便观察

其中核心的代码时cube-3D里的  transform-style: preserve-3d;

3.为需要产生动画的一面单独设置样式

<div class="cube">
	<div class="cube-3D">
		<div class="front">前</div>
		<div class="rear">后</div>
		<div class="left">左</div>
		<div class="right">右</div>
		<div class="top">上</div>
		<div class="foot foot-hover" >下</div>
	</div>
</div>

在foot（正方体的底面）添加一个类（foot-hover），单独设置这个面的样式

.foot-hover
{
	background-color: #8BC65A !important;
	opacity: 0.8;
}

效果：

4.设置鼠标hover效果

我们要的效果就是鼠标移上去底面往下移动一段距离，那么在hover时只需设置translateY的值即可

代码：

.cube:hover .foot-hover {
	    transform: translateY(40px) rotatex(-90deg);
}

效果：

这时我们会发现，正方体底部会出现镂空的效果，不太好看，我们想要的是下图的这种效果，其实实现很简单

5.优化

其实实现上图那种效果并不是很麻烦，只需要再复制一个底部div就行，再改一下颜色即可

代码如下：

<div class="cube">
		<div class="cube-3D">
			<div class="front">前</div>
			<div class="rear">后</div>
			<div class="left">左</div>
			<div class="right">右</div>
			<div class="top">上</div>
            <div class="foot" style="background-color: #E4F0DA;">下</div>
			<div class="foot foot-hover" >下</div>
		</div>
</div>

由于行内样式优先级高于外部样式，所以行内样式会覆盖外部样式的背景颜色。

再将div为cube的盒子再复制四个，改一下cube的rotateX和rotateY的值即可，完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style type="text/css">
			/* 研究开始 */
			.yan-Jiu {
				height: 510px;
				width: 100%;
				margin-top: 100px;
				background-color: #eee;
			}

			.yan-Jiu-center {
				width: 1200px;
				margin: auto;
				height: 420px;
				color: #6B6B6B;
			}

			.cube-3D {
				width: 41px;
				height: 41px;
				margin: auto;
				margin-top: 50px;
				text-align: center;
				transform: rotateX(45deg) rotateY(-45deg);
				transform-style: preserve-3d;
				font-size: 0;
			}

			.cube-3D div {
				width: 41px;
				height: 41px;
				position: absolute;
				left: 0;
				top: 0;
				/* opacity: 0.5; */
				background-color: white;
				border: 0.5px solid #82C14C;
				transition: 0.6s;
			}

			.front {
				transform: translateZ(21px);
			}

			.rear {
				transform: translateZ(-21px);
			}

			.left {
				transform: translateX(-21px) rotateY(-90deg);
			}

			.right {
				transform: translateX(21px) rotateY(-90deg);
			}


			.top {
				transform: translateY(-21px) rotateX(90deg);
			}

			.foot {
				transform: translatey(21px) rotateX(-90deg);
			}


			.cube {
				height: 300px;
				width: 240px;
				text-align: center;
				float: left;

			}



			.foot-hover,
			.right-hover,
			.top-hover,
			.front-hover {
				background-color: #8BC65A !important;
				opacity: 0.8;
			}

			.yan-Jiu:hover .foot-hover {
				transform: translateY(40px) rotatex(-90deg);

			}

			.yan-Jiu:hover .right-hover {
				transform: translateX(40px) rotateY(-90deg);
			}


			.yan-Jiu:hover .top-hover {
				transform: translateY(-40px) rotateX(90deg);

			}

			.yan-Jiu:hover .front-hover {
				transform: translatez(40px);

			}

			.yj-3d-3 {
				transform: rotateX(-45deg) rotateY(-45deg);
			}
		</style>
	</head>
	<body>


		<div class="yan-Jiu w">
			<div class="yan-Jiu-body ban">
				<div class="yan-Jiu-center">
					<div class="cube">
						<div class="cube-3D">
							<div class="front">前</div>
							<div class="rear">后</div>
							<div class="left">左</div>
							<div class="right">右</div>
							<div class="top">上</div>
							<div class="foot " style="background-color: #E4F0DA;">下</div>
							<div class="foot foot-hover">下</div>
						</div>
					</div>


					<div class="cube ">
						<div class="cube-3D ">
							<div class="front">前</div>
							<div class="rear">后</div>
							<div class="left">左</div>
							<div class="right right-hover">右</div>
							<div class="right " style="background-color: #E4F0DA;">下</div>
							<div class="top">上</div>
							<div class="foot">下</div>
						</div>
					</div>



					<div class="cube">
						<div class="cube-3D  yj-3d-3">
							<div class="front">前</div>
							<div class="rear">后</div>
							<div class="left">左</div>
							<div class="right right-hover">右</div>
							<div class="right" style="background-color: #E4F0DA;">下</div>
							<div class="top">上</div>
							<div class="foot">下</div>
						</div>
					</div>




					<div class="cube">
						<div class="cube-3D yj-3d-3">
							<div class="front">前</div>
							<div class="rear">后</div>
							<div class="left">左</div>
							<div class="right">右</div>
							<div class="top " style="background-color: #E4F0DA;">下</div>
							<div class="top top-hover">上</div>
							<div class="foot">下</div>
						</div>
					</div>





					<div class="cube">
						<div class="cube-3D">
							<div class="front " style="background-color: #E4F0DA;">下</div>
							<div class="front front-hover">前</div>
							<div class="rear">后</div>
							<div class="left">左</div>
							<div class="right">右</div>
							<div class="top">上</div>
							<div class="foot">下</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>


总结

以上就是今天小谭要分享的内容，代码写的不是很规范，在给div命名时也很随意，如果有什么不足之处也请各位大佬手下留情，多多包涵，小谭也欢迎各位大佬指点一二，小谭不胜荣幸，感谢包容，感谢观看，靴靴!

小谭鸡米花
关注
CSS 3D正方体
sxzxiaofeng168的博客
08-19 337
CSS 3D正方体 分享一个拼好的3D正方体的源码 **<style> #outer{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #fff; perspect...
CSS_3D正方体动画
sinat_25606843的博客
02-27 546
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #box{width:100px; height:100px; padding:
纯CSS实现beautiful的3D动画
wang_yu_shun的博客
11-04 1081
大家好，我是“前端点线面”，一位新生代农民工，欢迎关注我获取最新前端知识和大量思维导图(“百题斩”获取《前端百题斩》pdf版；分别回复“go、React、操作系统、Linux、设计模式、j...
可视化系列讲解：css3D：如何绘制正方体，长方体等
wangyuiba1314的博客
12-31 2352
前端可视化系列讲解：css3D，svg，canvas等
H5+CSS3实现正方体效果
生活步步是坎坷，笑到最后是大哥
06-23 1332
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 250px; height: 250px; ...
纯css3实现的3D正方体骰子旋转动画特效源码.zip
11-20
在本资源中，我们关注的是一个使用纯CSS3技术实现的3D正方体骰子旋转动画特效。CSS3是层叠样式表的第三版，它引入了许多强大的新功能，如选择器、布局模型（Flexbox和Grid）以及最重要的——3D转换。这个3D正方体...
纯CSS3实现带阴影的正方体齿轮转动3D动画效果源码.zip
10-31
【标题】中的“纯CSS3实现带阴影的正方体齿轮转动3D动画效果源码”指的是使用CSS3技术创建的、具有3D阴影效果的正方体齿轮动态旋转动画。这种效果通常用于网页设计中，增加视觉吸引力，或者作为交互元素来提升用户...
纯CSS3绘制正方体旋转动画特效
06-24
纯CSS3绘制正方体旋转动画特效是一种利用CSS3的强大功能来实现的3D图形变换技术，无需JavaScript或其他脚本语言。CSS3中的3D转换和透视效果使得开发者能够创建出具有深度感的立体视觉效果，例如这个正方体旋转动画。...
html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐
07-16
1.html+css+jquery完整源码，简洁易懂，新手的最爱，炫酷的动画5件套，电脑和手机均已兼容； 2.3D正方体旋转动画相册2中实现方式；...5.炫酷万花筒动画实现，可鼠标或触屏交互 下载解压后浏览器打开页面即可看到效果。
css3图像立体显示,CSS3 立体展示/不是正方形的图形
weixin_33509203的博客
08-04 304
CSS语言：CSSSCSS确定@keyframes spin {0%, 50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}65%,70% {transform: rotateX(-25deg) rotateY(40deg) rotateZ(0deg);}80% {transform: rotateX(-50deg) rotateY...
纯CSS实现鼠标经过3D立体动态展示图片.zip
07-03
纯CSS实现鼠标经过3D立体动态展示（女朋友）图片特效代码，表白神器
纯CSS实现图片美化带边框3D效果鼠标经过旋转堆叠特效动画.zip
07-11
纯CSS实现图片美化带边框3D效果鼠标经过旋转堆叠特效动画代码下载。
又一款纯CSS3立体式3D鼠标悬停效果.zip
07-11
又一款纯CSS3立体式3D鼠标悬停效果
CSS3 如何用代码产生3D正方体的效果
MrWangJB的博客
02-08 347
第一步 想设置3D正方体 要先把元素的初始平面图的效果写好： 首先正方体是由6个面组成 这里我们用一个ul列表来表示 代码如下： <style type="text/css"> *{margin: 0;padding: 0;} body,html{height: 100%;} li{list-style: none;} .box{position: abs...
css3正方体选中父层 子层解体_利用CSS3实现立方体及移动组装效果
weixin_39584529的博客
01-13 155
本帖最后由 庭院深深深几许 于 2019-4-19 09:20 编辑实现一个立方体由于HTML页面都是平面，并没有提供标准的立方体解决方案，就像我们在一张A4纸上不可能绘制出一个标准的立方体，只能通过二维平面的视觉效果来模拟一个立方体效果，如图所示。20181029_162810_694.png (19.79 KB, 下载次数: 0)2019-4-19 09:15 上传毫无疑问，上图中这个立方体只...
用CSS动画制作一个正方体
qq_42811836的博客
08-11 1254
CSS技术很强大，不仅仅是可以调色啊，调位置啊。 更重要的是，我们可以直接利用CSS来制作一些色彩缤纷的几何图形，同时我们还可以用神奇的代码，让这些图形自己动起来，然我们即便不能走进屏幕里的世界，也可以轻松地对它们进行观察。 现在，给大家看一下如何制作一个会动的正方体。 废话少说，小弟献丑上代码了！（手动滑稽） 首先我们先用HTML构建好 在网页中能把这个正方体呈现出来的所需的div ...
纯CSS实现鼠标经过3D立体动态展示图片特效代
Promenade漫步
04-19 481
纯CSS实现鼠标经过3D立体动态展示图片特效代
css正方体
weixin_71133277的博客
07-02 586
css正方体
纯CSS3动画实现正方体及旋转
SugarXiXixi的博客
09-17 371
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、transf是什么？ 二、使用步骤 1html文档 2.css 标题 纯CSS3动画实现正方体及旋转 提示：以下是本篇文章正文内容，下面案例可供参考 一、transform是什么？ 二、使用步骤 1.html 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta c...
css3d旋转正方体
最新发布
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。使用rotate3d函数可以指定旋转轴和旋转角度。在给定的示例中，使用了一个名为box1的div元素，并在:hover时应用了旋转效果。 具体过程如下： 1. 创建一个包含正方体的div元素，设置宽度和高度，并将其position属性设置为absolute，以便在父元素中进行定位。 2. 使用transition属性设置动画过渡效果。 3. 使用:hover选择器为box1元素设置旋转效果。在这里，rotate3d函数被用来指定旋转轴和旋转角度。可以通过设置不同的参数值来实现不同的旋转效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值