創(chuàng)建CSS立方體

在CSS中，我們可以使用transform屬性來(lái)創(chuàng)建一個(gè)立方體，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="cube"></div>

CSS樣式：

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(20deg);
}
.cube::before, .cube::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: #007BFF;
}
.cube::before {
  transform: translateZ(-100px);
}
.cube::after {
  transform: translateZ(100px);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為cube的div，并通過(guò)CSS樣式使其呈現(xiàn)為立方體，我們?cè)O(shè)置了position: relative;來(lái)定位立方體，并指定其寬度和高度，我們使用transform-style: preserve-3d;來(lái)確保立方體的子元素能夠按照3D空間進(jìn)行定位，我們通過(guò)transform: rotateX(-20deg) rotateY(20deg);來(lái)旋轉(zhuǎn)立方體，使其更具立體感，我們使用兩個(gè)偽元素::before和::after來(lái)創(chuàng)建立方體的正面和背面，并通過(guò)transform: translateZ(-100px);和transform: translateZ(100px);來(lái)將其定位在立方體的內(nèi)部。