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

一、Flex布局实现3D骰子

1. 准备工作

首先，在HTML页面中添加一个div作为3D骰子的外层容器。在该容器中，使用6个div分别作为6个面。

<div class="dice">
   <div class="front"></div>
   <div class="top"></div>
   <div class="right"></div>
   <div class="bottom"></div>
   <div class="left"></div>
   <div class="back"></div>
</div>

1. Flexbox的属性

将外层容器设置为Flex布局，并通过flex-wrap属性设置为nowrap，使子元素不会换行，同时设置justify-content和align-items属性来控制子元素的对齐方式。

.dice {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   perspective: 800px;
}

1. 面的布局

每个面的布局使用了绝对定位，这样每个面就可以重叠在一起了。然后，给每个面添加背景、border等样式，实现立体的3D效果。

.front {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #fff;
   border: solid 2px #000;
   transform: translateZ(100px);
}

.top {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #f00;
   border: solid 2px #000;
   transform: rotateX(-90deg) translateZ(100px);
}

.right {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #0f0;
   border: solid 2px #000;
   transform: rotateY(90deg) translateZ(100px);
}

.bottom {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #00f;
   border: solid 2px #000;
   transform: rotateX(90deg) translateZ(100px);
}

.left {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ff0;
  border: solid 2px #000;
  transform: rotateY(-90deg) translateZ(100px);
} 

.back {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #f0f;
   border: solid 2px #000;
   transform: rotateY(180deg) translateZ(100px);
}

这里，使用translateZ和rotate属性控制面在三维空间中的位置和方向。

1. 完整代码

<div class="dice">
   <div class="front"></div>
   <div class="top"></div>
   <div class="right"></div>
   <div class="bottom"></div>
   <div class="left"></div>
   <div class="back"></div>
</div>

.dice {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   perspective: 800px;
}

.front {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #fff;
   border: solid 2px #000;
   transform: translateZ(100px);
}

.top {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #f00;
   border: solid 2px #000;
   transform: rotateX(-90deg) translateZ(100px);
}

.right {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #0f0;
   border: solid 2px #000;
   transform: rotateY(90deg) translateZ(100px);
}

.bottom {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #00f;
   border: solid 2px #000;
   transform: rotateX(90deg) translateZ(100px);
}

.left {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #ff0;
  border: solid 2px #000;
  transform: rotateY(-90deg) translateZ(100px);
} 

.back {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #f0f;
   border: solid 2px #000;
   transform: rotateY(180deg) translateZ(100px);
}

二、Grid布局实现3D骰子

1. 准备工作

与Flex布局相同，先在HTML页面中添加一个div作为外层容器，然后在该容器中添加6个div作为6个面。

<div class="dice">
   <div class="front"></div>
   <div class="top"></div>
   <div class="right"></div>
   <div class="bottom"></div>
   <div class="left"></div>
   <div class="back"></div>
</div>

1. Grid布局的属性

将外层容器设置为Grid布局，并设置6个子元素的大小和位置。

.dice {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(2, 100px);
   grid-gap: 2px;
   width: 306px;
   height: 206px;
   perspective: 800px;
}

1. 面的布局

在每个子元素中添加背景色、边框以及旋转等样式，使得六个面可以拼合成一个骰子。

.front {
   background-color: #fff;
   border: solid 2px #000;
   transform: transformZ(100px);
   grid-area: 2/2/3/3;
}

.top {
   background-color: #f00;
   border: solid 2px #000;
   transform: transformX(-100px) rotateZ(90deg) transformOrigin(bottom bottom);
   grid-area: 1/2/2/3;
}

.right {
   background-color: #0f0;
   border: solid 2px #000;
   transform: transformY(100px) rotateZ(-90deg) transformOrigin(left right);
   grid-area: 2/3/3/4;
}

.bottom {
   background-color: #00f;
   border: solid 2px #000;
   transform: transformX(100px) rotateZ(90deg) transformOrigin(top top);
   grid-area: 3/2/4/3;
}

.left {
  background-color: #ff0;
  border: solid 2px #000;
  transform: transformY(-100px) rotateZ(90deg) transformOrigin(right left);
  grid-area: 2/1/3/2;
} 

.back {
   background-color: #f0f;
   border: solid 2px #000;
   transform: rotateX(180deg) transformZ(-100px);
   grid-area: 2/2/3/3;
}

这里，使用transform和transform-origin属性来实现3D效果。同时，通过grid-area属性来确定子元素在Grid中的位置和大小。

1. 完整代码

<div class="dice">
   <div class="front"></div>
   <div class="top"></div>
   <div class="right"></div>
   <div class="bottom"></div>
   <div class="left"></div>
   <div class="back"></div>
</div>

.dice {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(2, 100px);
   grid-gap: 2px;
   width: 306px;
   height: 206px;
   perspective: 800px;
}

.front {
   background-color: #fff;
   border: solid 2px #000;
   transform: transformZ(100px);
   grid-area: 2/2/3/3;
}

.top {
   background-color: #f00;
   border: solid 2px #000;
   transform: transformX(-100px) rotateZ(90deg) transformOrigin(bottom bottom);
   grid-area: 1/2/2/3;
}

.right {
   background-color: #0f0;
   border: solid 2px #000;
   transform: transformY(100px) rotateZ(-90deg) transformOrigin(left right);
   grid-area: 2/3/3/4;
}

.bottom {
   background-color: #00f;
   border: solid 2px #000;
   transform: transformX(100px) rotateZ(90deg) transformOrigin(top top);
   grid-area: 3/2/4/3;
}

.left {
  background-color: #ff0;
  border: solid 2px #000;
  transform: transformY(-100px) rotateZ(90deg) transformOrigin(right left);
  grid-area: 2/1/3/2;
} 

.back {
   background-color: #f0f;
   border: solid 2px #000;
   transform: rotateX(180deg) transformZ(-100px);
   grid-area: 2/2/3/3;
}