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

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

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

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

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

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

显示的结果是这样子的：

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

显示结果看图：

接下来是右边

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

显示结果如下：

up 上得调整，同理，只需要往y方向移动 up 到 -50px位置（box高度的一搬，然后转动90度即可）

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

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

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

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

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

调整后如图所示

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

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

如图

forward得调整

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

效果出来了！！！

一个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]

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

南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)
南宁小程序开发:www.nasiot.com canvas画板工具 ,一定要在canvas里面写width height 否则会导致画线被强制放大 <canvas id="c" ...
企业OA系统定制开发,挑战百日学习计划第50天(响应式网站开发)
上一周,在群里面吹水摸鱼,然后来了一个学生仔,正好水平很菜,比我还菜,瞬间我的感觉就上来了,炫耀的时机就在眼前. 在他面前我终于找回了信心.然后他顺水推舟,请教了我三个问题,说是学校的作业, 这逼我 ...
微信小程序Node.js+uniapp学习计划与日程管理系统app
本学习计划与日程管理系统,主要用来为用户提供自主计划学习的主要功能,主要实现首页.计划学习页.日程安排页.个人中心页这四大页面,相对应的功能如下分析: (1) 首页:该页面主要由搜索.论坛发表. ...
智能学习硬件小程序开发，提升学习感受
随着科学技术的飞速发展,各种智能学习硬件层出不穷,日常生活中的智能电子产品也愈来愈多,但是大部分硬件产品都是单独使用的,并没有配套的app或者小程序,在使用过程中总是会出现一些小插曲,比如:孩子用学习 ...
小程序开发代码_企业为什么要选择小程序定制开发？
随着小程序红利的爆发,越来越多的商家投身小程序的浪潮中,而现在微信小程序的制作方式有两种,一种是模板小程序开发,另一种是定制小程序开发.随着市场竞争激烈程度的升级和商家开发的个性需求,很多商家更多的是 ...
校友小程序定制开发带我们回到那个学生时代
学生时代总是给人一种单纯美好的感觉,也会是每个人记忆深处最深刻的回忆,尤其是一起学习生活几年的同窗随着毕业不得不各奔东西,但是大家都对母校有着不一样的情怀,也想有一个什么东西能够把各个高校校友联系在一 ...
android应用程序开发_抚顺小程序开发定制找谁,吉林小程序定制
湖南庚午网络科技有限公司为您详细解读kpuZae抚顺小程序开发定制找谁的相关知识与详情,微信小法式,简称小法式,缩写XCX,英文名Mini Program,是一种不需要#安拆即可使用的应用,它实现了应 ...
小程序定制开发需要注意的事项
我们可以从微信这个平台上面观察出来,如今非常支持的是对企业之间的合作,所以也就是因为这样的一个措施,让微信上的小程序绝对是成为了今年在移动互联网行业当中最火热的一个产品,而且我们可以预见,在未来不久, ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...

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

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

最新文章

热门文章