小程序定制,挑战百日学习计划第31天（3D骰子制作)

最新推荐文章于 2023-04-20 10:35:42 发布

zkelm.com

最新推荐文章于 2023-04-20 10:35:42 发布

阅读量461

点赞数 1

分类专栏：南宁小程序开发小程序文章标签： html5 css3 3d

本文链接：https://blog.csdn.net/zkelm/article/details/107047662

版权

小程序同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

南宁创业小公司专业做小程序开发定制 www.zkelm.com

本来只是想学一下flex得排版，但是因为学了不理解，所以就跟着做一个骰子，做了骰子就像让骰子动起来，
动起来了，感觉为什么不是3d呢。所以又研究了几天做一个3d得骰子，【小程序定制：www.zkelm.com】
这章的教程我要做一个3d得骰子，点击的时候，它就会旋转，如图所示
小程序开发：zkelm.com

这个需要用到CSS 里面的3d transform-style：preserve-3d;

首先要了解的就是3D的坐标：这点很重要，为了方便大家的理解，我做了一个图

企业OA定制：www.zkelm.com

1.先制作一个div 框住6个div 分别是上下左右前后

<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forward">前</div>
<div class="back">后</div>
<div>

把 box 3d话transform-style： preverse-3d；此时 .box 就会变成一个拥有3d属性的 6方体（我是这样子理解的，不对的话请指正）

.box{
transform-style:preserve-3d;
width:100px;
height:100px;
border:1px solid #666;
}

显示的结果是这样子的：
企业oa开发：www.zkelm.com
1.我们把left 向左边移动50px，然后 rotatey（90deg）旋转90度

.box div{
position:absolute;
width:100%;height:100%;
top:0;left:0;
}
.left{
background:pink;
transform:translatex(-50px) rotatey(90deg);
}

显示结果看图：

南宁软件开发：www.zkelm.com

接下来是右边

.right{
 background:blue;
 transform:translatex(50px) rotatey(90deg)
}

显示结果如下：
广西小程序开发：zkelm.com
up 上得调整，同理，只需要往y方向移动 up 到 -50px位置（box高度的一搬，然后转动90度即可）

.up{
  background:#666;
  transform:translatey(-50px) rotatex(90deg)
}

调整查看位置可以在 .box 之中加入 transform：rotatex() rotatey() 对视角位置进行调整观察

调整后展示效果更佳，如图所示， up 已经在顶部！

小程序开发：zkelm.com

down得调整（同理）往下移动50px 然后旋转90度

.down{
background:deeppink;
transform:translatey(50px) rotatex(90deg)
}

调整后如图所示

南宁小程序开发：zkelm.com

back调整这个方向就是沿着Z轴移动50px 即可、其他都不需要懂 back 则是往后移动50px

.back{
background:yellow;
transform:translatez(-50px);
}

如图
小程序开发：www.zkelm.com

forward得调整

.forward{
  background:green;
  tranform:translatez(50px);
}

效果出来了！！！

网站开发：www.zkelm.com

一个3D骰子就这样子制作完毕了！确实就是要搞清楚那个 xyz 轴就比较容易理解了，
有了这个3d得盒子，然后在这个基础上制作一个骰子，还是很简单的事情！下一章开始发布
以下给出完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D骰子得制作transform:preverse-3d</title>
		<style>
			.box{
				margin:100px;
				width:100px;
				height: 100px;
				border:1px solid #666;
				position: relative;
				transform: rotatex(20deg) rotatey(-30deg);
				transform-style: preserve-3d;
			}
			.box div{
				position:absolute;
				top:0;
				left:0;
				width:100%;height: 100%;
				font-size: 20px;
				text-align: center;
				line-height: 100px;
			}
			.left{
				background-color: pink;
				transform:translatex(-50px) rotatey(90deg);
			}
			.right{
				background-color: blue;
				transform:translatex(50px) rotatey(90deg);
			}
			.up{
			  background:#666;
			  transform:translatey(-50px) rotatex(90deg)
			}
			.down{
			  background:deeppink;
			  transform:translatey(50px) rotatex(90deg)
			}
			.back{
			    background:yellow;
			    transform:translatez(-50px);
			}
			.forward{
				background-color: green;
				transform:translatez(50px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="up">上</div>
			<div class="down">下</div>
			<div class="left">左</div>
			<div class="right">右</div>
			<div class="forward">前</div>
			<div class="back">后</div>
		</div>
	</body>
</html>

显示结果：
[南宁创业小公司，专业做小程序开发与定制：www.zkelm.com]

zkelm.com

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序定制,挑战百日学习计划第31天（3D骰子制作)

南宁创业小公司专业做小程序开发定制 www.zkelm.com本来只是想学一下flex得排版，但是因为学了不理解，所以就跟着做一个骰子，做了骰子就像让骰子动起来，动起来了，感觉为什么不是3d呢。所以又研究了几天做一个3d得骰子，【小程序定制：www.zkelm.com】这章的教程我要做一个3d得骰子，点击的时候，它就会旋转，如图所示这个需要用到CSS 里面的3d transform-style：preserve-3d;首先要了解的就是3D的坐标：这点很重要，为了方便大家的.
复制链接

扫一扫

专栏目录