지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.

青灯夜游
풀어 주다： 2022-09-23 09:58:10
앞으로
2214명이 탐색했습니다.

프런트엔드 인터뷰에서 CSS를 사용하여 주사위/마작 레이아웃을 구현하는 방법에 대한 질문을 자주 받습니다. 다음 기사에서는 CSS를 사용하여 3D 주사위를 만드는 방법을 소개합니다(Flex 및 Grid 레이아웃은 3D 주사위를 구현함).

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.

다음 문서에서 배울 수 있습니다.

  • 변형을 사용하여 3D 모양 구현
  • 3D 주사위에 대한 회전 애니메이션 구현
  • Flex 레이아웃을 사용하여 주사위 레이아웃 구현 . [추천 학습:
    • css 동영상 튜토리얼
  • ]
    • 1. Flex 레이아웃을 사용하여 6면 구현

먼저 주사위 6면의 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 및 그리드 레이아웃(코드 포함)을 사용하여 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 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.(2) 두 점

HTML 구조는 다음과 같습니다.

<div class="dice second-face">
  <span class="dot"></span>
  <span class="dot"></span>
</div>
로그인 후 복사

먼저, 상위 요소를 설정합니다. 플렉스 레이아웃의 두 번째 측면에 다음 속성을 추가합니다.

justify-content: space-between: 플렉스 컨테이너의 시작과 끝 부분에 하위 요소를 배치합니다. 

.second-face {
   display: flex;
   justify-content : space-between;
}
로그인 후 복사

현재 포인트 위치는 다음과 같습니다.

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.이때 첫 번째 포인트는 올바른 위치인 왼쪽 상단에 있습니다. 그리고 두 번째 점은 오른쪽 하단에 있어야 합니다. 따라서 align-self 속성을 사용하여 두 번째 점의 위치를 ​​개별적으로 조정해 보겠습니다.

align-self: flex-end: 항목을 Flex 컨테이너의 끝에 정렬합니다. 

.second-face .dot:nth-of-type(2) {
 align-self: flex-end;
}
로그인 후 복사

이제 두 번째 변은 다음과 같습니다.

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 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 및 그리드 레이아웃(코드 포함)을 사용하여 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 및 그리드 레이아웃(코드 포함)을 사용하여 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>
로그인 후 복사

4 점의 다각형에서는 두 행으로 나눌 수 있으며 각 행에는 두 개의 열이 포함됩니다. 한 행은 flex-start에 있고 다른 행은 flex-end에 있습니다. 그리고 주사위의 왼쪽과 오른쪽에 배치하려면 justify-content:space-between을 추가하세요. 

.fourth-face {
 display: flex;
 justify-content: space-between
}
로그인 후 복사

다음으로 점의 두 열을 별도로 레이아웃해야 합니다.

열을 flex 레이아웃으로 설정합니다.
  • 점이 수직 방향으로 배치되도록 flex-direction을 열로 설정합니다.
  • justify-content 설정 공백으로 이동하면 첫 번째 점이 맨 위에 있고 두 번째 점이 맨 아래에 있게 됩니다. 
  • .fourth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}
    로그인 후 복사
    • 이제 네 번째 변은 다음과 같습니다:

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. (5) Five points

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 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다. 중간 지점도 조정해야 합니다. justify-content를 중앙에 배치하여 수직으로 중앙에 위치하게 합니다: 

.fifth-face .column:nth-of-type(2) {
 justify-content: center;
}
로그인 후 복사

이제 다섯 번째 변은 다음과 같습니다:

CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 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 및 그리드 레이아웃(코드 포함)을 사용하여 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>
로그인 후 복사

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

1CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 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;
}
로그인 후 복사

现在六个面的样式如下：

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

.dot:nth-child(odd):last-child {
    grid-area: g;
}
로그인 후 복사

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

对于上面的 CSS，对应的 HTML分别是父级为一个p标签，该面有几个点，子级就有几个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 的角度不重要，主要是便于后面查看。

此时六个面的这样的：

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

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

.first-face {
  transform: translateZ(100px);
}
로그인 후 복사

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

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

.sixth-face {
  transform: translateZ(-100px);
}
로그인 후 복사

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

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

.second-face {
  transform: translateX(-100px) rotateY(-90deg);
}
로그인 후 복사

此时六个面是这样的：

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

.fifth-face {
  transform: translateX(100px) rotateY(90deg);
}
로그인 후 복사

此时六个面是这样的：

下面来调整第三面，道理同上：

.third-face {
  transform: translateY(100px) rotateX(90deg);
}
로그인 후 복사

此时六个面是这样的：

最后来调整第五面：

.fourth-face {
  transform: translateY(-100px) rotateX(90deg);
}
로그인 후 복사

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

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

@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;
}
로그인 후 복사

最终的效果如下：

在线体验：

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

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

（学习视频分享：css视频教程、web前端）

위 내용은 CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css flex grid
원천：jb51.net
이전 기사：CSS 100vh에 의존하면 안되는 이유에 대해 이야기해 볼까요? 다음 기사：CSS 팁: 전환을 사용하여 호버 상태 유지
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
높이가 예상한 것과 다른 CSS 그리드에 문제가 있습니다. 어떤 실수를 저지를 수 있습니까? 저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다. 실제...
에서 2024-04-06 12:52:14
0
1
339
너비가 고정되고 최대 너비가 90%인 그리드 하위 항목이 그리드 트랙을 오버플로하는 이유는 무엇입니까? 질문: 제 질문은 매우 간단합니다. .header 요소가 뷰포트 너비 1500픽셀에 도달할 때 그리드 트랙을 오버플로하는 이유를 알고 싶습니다. 코드: *{box...
에서 2024-04-05 14:33:39
0
1
1426
Ag-Grid: 행의 데이터를 기반으로 하는 대신 타이머를 사용하여 행 스타일을 지정할 수 있습니까? 잠시 후 행의 배경색을 변경해야 합니다. 그리드에 시간(초)이 있는 열이 있는데 해당 시간의 50%가 경과한 후에 행 색상을 변경해야 합니다. 그리드 자체의 데이...
에서 2024-04-03 20:14:05
0
1
360
부트스트랩 그리드 시스템이 적용되지 않습니다. 내 프로젝트에서 문제가 다시 발생합니다. 홈 구성 요소에 렌더링하는 구성 요소 ProductCard가 있습니다. 이것은 ProductCard 구성요소 <di...
에서 2024-04-03 18:23:18
0
2
308
그리드 템플릿 열이 행의 항목을 정렬하지 않습니다. 저는 HTML과 CSS를 처음 접하고 그리드 템플릿 열을 사용하여 탐색 모음을 만들려고 합니다. 내 생각은 탐색 모음을 로고 부분, 웹 사이트 홈페이지 부분, 소...
에서 2024-04-03 16:58:18
0
1
370
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿