CSS使用Flex和Grid布局实现3D骰子


Posted in HTML / CSS onAugust 05, 2022

在前端面试中,经常会问到如何使用 CSS 实现骰子/麻将布局。今天我们就来用CSS 创建一个 3D 骰子,通过本文可以学到;

  • 使用transform来实现3D形状;
  • 给 3D 骰子实现旋转动画;
  • 使用 Flex 布局来实现骰子布局;
  • 使用 Grid 布局来实现骰子布局。

1. 使用 Flex 布局实现六个面

首先,来定义骰子六个面的 HTML 结构:

<div class="dice-box">
  <div class="dice first-face">
    <span class="dot"></span>
  </div>
  <div class="dice second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="fifth-face dice">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="dice sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
</div>

下面来实现每个面和每个点的的基本样式:

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  background-color: tomato;
  border-radius: 10%;
}

.dot {
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: white;
}

实现效果如下:

CSS使用Flex和Grid布局实现3D骰子

(1)一个点

HTML 结构如下:

<div class="dice first-face">
  <span class="dot"></span>
</div>

实现第一个面,只需要让它水平和垂直方向都居中即可:

  • justify-content:center:使点与主轴(水平)的中心对齐。
  • align-items:center:使点与交叉轴(垂直)的中心对齐。

代码实现如下:

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

现在第一面是这样的:

CSS使用Flex和Grid布局实现3D骰子

(2)两个点

HTML 结构如下:

<div class="dice second-face">
  <span class="dot"></span>
  <span class="dot"></span>
</div>

首先来将第二个面的父元素设置为flex布局,并添加以下属性:

justify-content: space-between:将子元素放置在 flex 容器的开头和结尾。

.second-face {
   display: flex;
   justify-content : space-between;
}

现在点的位置如下:

CSS使用Flex和Grid布局实现3D骰子

这时,第一个点在正确的位置:左上角。而第二个点需要在右下角。因此,下面来使用 align-self 属性单独调整第二个点的位置:

align-self: flex-end:将项目对齐到 Flex 容器的末尾。

.second-face .dot:nth-of-type(2) {
 align-self: flex-end;
}

现在第二面是这样的:

CSS使用Flex和Grid布局实现3D骰子

(3)三个点

HTML 结构如下:

<div class="dice third-face">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

可以通过在第二面放置另一个中心点来实现第三面。

  • align-self: flex-end:将项目对齐到 Flex 容器的末尾。
  • align-self: center:将项目对齐到 Flex 容器的中间。
.third-face {
 display: flex;
  justify-content : space-between;
}

.third-face .dot:nth-of-type(2) {
 align-self: center;
}

.third-face .dot:nth-of-type(3) {
 align-self: flex-end;
}

现在第三面是这样的:

CSS使用Flex和Grid布局实现3D骰子

如果想要第一个点在右上角,第三个点在左下角,可以将第一个点的 align-self 更改为 flex-end,第二个点不变,第三个点无需设置,默认在最左侧:

.third-face {
 display: flex;
  justify-content : space-between;
}

.third-face .dot:nth-of-type(1) {
 align-self :flex-end;
}

.third-face .dot:nth-of-type(2) {
 align-self :center;
}

现在第三面是这样的:

CSS使用Flex和Grid布局实现3D骰子

(4)四个点

HTML 结构如下:

<div class="dice fourth-face">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

在四个点的面中,可以将其分为两行,每行包含两列。一行将在 flex-start ,另一行将在 flex-end 。并添加 justify-content: space-between 以便将其放置在骰子的左侧和右侧。

.fourth-face {
 display: flex;
 justify-content: space-between
}

接下来需要对两列点分别进行布局:

  • 将列设置为flex布局;
  • 将flex-direction​设置为column,以便将点放置在垂直方向上
  • 将justify-content​设置为space-between,它将使第一个点在顶部,第二个点在底部。
.fourth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}

现在第四面是这样的:

CSS使用Flex和Grid布局实现3D骰子

(5)五个点

HTML 结构如下:

<div class="fifth-face dice">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

第五面和第四面的差异在于多了中间的那个点。所以,可以基于第四面,来在中间增加一列,样式如下:

.fifth-face {
 display: flex;
 justify-content: space-between
}

.fifth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}

现在第五面是这样的:

CSS使用Flex和Grid布局实现3D骰子

还需要对中间的点进行调整,可以设置 justify-content 为 center 让它垂直居中:

.fifth-face .column:nth-of-type(2) {
 justify-content: center;
}

现在第五面是这样的:

CSS使用Flex和Grid布局实现3D骰子

(6)六个点

HTML 结构如下:

<div class="dice sixth-face">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

第六个面的布局和第四个几乎完全一样,只不过每一列多了一个元素,布局实现如下:

.sixth-face {
 display: flex;
 justify-content: space-between
}
 
.sixth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}

现在第六面是这样的:

CSS使用Flex和Grid布局实现3D骰子

2. 使用 Grid 布局实现六个面

骰子每个面其实可以想象成一个 3 x 3 的网格,其中每个单元格代表一个点的位置:

+---+---+---+
| a | b | c |
+---+---+---+
| d | e | f |
+---+---+---+
| g | h | i |
+---+---+---+

要创建一个 3 x 3 的网格,只需要设置一个容器元素,并且设置三个大小相同的行和列:

.dice {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

这里的 fr 单位允许将行或列的大小设置为网格容器可用空间的一部分,这上面的例子中,我们需要三分之一的可用空间,所以设置了 1fr 三次。

我们还可以使用 repeat(3, 1fr) 将 1fr 重复 3 次,来代替 1fr 1fr 1fr。还可以使用定义行/列的grid-template速记属性将上述代码进行简化:

.dice {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

每个面所需要定义的 HTML 就像是这样:

<div class="dice">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

所有的点将自动放置在每个单元格中,从左到右:

CSS使用Flex和Grid布局实现3D骰子

现在我们需要为每个骰子值定位点数。开始时我们提到,可以将每个面分成 3 x 3 的表格,但是这些表格并不是每一个都是我们需要的,分析骰子的六个面,可以发现,我们只需要以下七个位置的点:

+---+---+---+
| a |   | c |
+---+---+---+
| e | g | f |
+---+---+---+
| d |   | b |
+---+---+---+

我们可以使用grid-template-areas属性将此布局转换为 CSS:

.dice {
  display: grid;
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

因此,我们可以不使用传统的单位来调整行和列的大小,而只需使用名称来引用每个单元格。其语法本身提供了网格结构的可视化,名称由网格项的网格区域属性定义。中间列中的点表示一个空单元格。

下面来使用grid-area属性为网格项命名,然后,网格模板可以通过其名称引用该项目,以将其放置在网格中的特定区域中。:nth-child()伪选择器允许单独定位每个点。

.dot:nth-child(2) {
    grid-area: b;
}

.dot:nth-child(3) {
    grid-area: c;
}

.dot:nth-child(4) {
    grid-area: d;
}

.dot:nth-child(5) {
    grid-area: e;
}

.dot:nth-child(6) {
    grid-area: f;
}

现在六个面的样式如下:

CSS使用Flex和Grid布局实现3D骰子

可以看到,1、3、5的布局仍然是不正确的,只需要重新定位每个骰子的最后一个点即可:

.dot:nth-child(odd):last-child {
    grid-area: g;
}

这时所有点的位置都正确了:

CSS使用Flex和Grid布局实现3D骰子

对于上面的 CSS,对应的 HTML分别是父级为一个div标签,该面有几个点,子级就有几个span标签。代码如下:

<div class="dice-box">
  <div class="dice first-face">
    <span class="dot"></span>
  </div>
  <div class="dice second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice fourth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="fifth-face dice">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice sixth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

整体的 CSS 代码如下:

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  background-color: tomato;
  border-radius: 10%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

.dot {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
}

.dot:nth-child(2) {
  grid-area: b;
}

.dot:nth-child(3) {
  grid-area: c;
}

.dot:nth-child(4) {
  grid-area: d;
}

.dot:nth-child(5) {
  grid-area: e;
}

.dot:nth-child(6) {
  grid-area: f;
}

.dot:nth-child(odd):last-child {
  grid-area: g;
}

​3. 实现 3D 骰子

上面我们分别使用 Flex 和 Grid 布局实现了骰子的六个面,下面来这将六个面组合成一个正方体。

首先对六个面进行一些样式修改:

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;
  box-sizing: border-box;
  opacity: 0.7;
  background-color: tomato;
  position: absolute;
}

定义它们的父元素:

.dice-box {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
}

其中,transform-style: preserve-3d;表示所有子元素在3D空间中呈现。这里的transform 的角度不重要,主要是便于后面查看。

此时六个面的这样的:

CSS使用Flex和Grid布局实现3D骰子

看起来有点奇怪,所有面都叠加在一起。不要急,我们来一个个调整位置。

首先将第一个面在 Z 轴移动 100px:

.first-face {
  transform: translateZ(100px);
}

第一面就到了所有面的上方:

CSS使用Flex和Grid布局实现3D骰子

因为每个面的宽高都是 200px,所以将第六面沿 Z 轴向下调整 100px:

.sixth-face {
  transform: translateZ(-100px);
}

第六面就到了所有面的下方:

CSS使用Flex和Grid布局实现3D骰子

下面来调整第二面,将其在X轴向后移动 100px,并沿着 Y 轴旋转 -90 度:

.second-face {
  transform: translateX(-100px) rotateY(-90deg);
}

此时六个面是这样的:

CSS使用Flex和Grid布局实现3D骰子

下面来调整第二面的对面:第五面,将其沿 X 轴的正方向移动 100px,并沿着 Y 轴方向选择 90 度:

.fifth-face {
  transform: translateX(100px) rotateY(90deg);
}

此时六个面是这样的:

CSS使用Flex和Grid布局实现3D骰子

下面来调整第三面,道理同上:

.third-face {
  transform: translateY(100px) rotateX(90deg);
}

此时六个面是这样的:

CSS使用Flex和Grid布局实现3D骰子

最后来调整第五面:

.fourth-face {
  transform: translateY(-100px) rotateX(90deg);
}

此时六个面就组成了一个完整的正方体:

CSS使用Flex和Grid布局实现3D骰子

下面来为这个骰子设置一个动画,让它转起来:

@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(45deg) rotateZ(45deg);
  }
  to {
    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);
  }
}

.dice-box {
  animation: rotate 5s linear infinite;
}

最终的效果如下:

CSS使用Flex和Grid布局实现3D骰子

在线体验:

3D 骰子-Flex:https://codepen.io/cugergz/pen/jOzYGyV

3D 骰子-Grid:https://codepen.io/cugergz/pen/GROMgEe

到此这篇关于CSS使用Flex和Grid布局实现3D骰子的文章就介绍到这了,更多相关CSS 3D骰子内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 #HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 #HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 #HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 #HTML / CSS
纯CSS打字动画的实现示例
Aug 05 #HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
You might like
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
浅谈php自定义错误日志
2015/02/13 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python创建字典的八种方式
2019/02/27 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
中考学习决心书
2015/02/04 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
MySQL系列之四 SQL语法
2021/07/02 MySQL
Python中字符串对象语法分享
2022/02/24 Python