时间戳

首页 > 解决方案 > 纯 CSS 中的 3D 盒子

html - 纯 CSS 中的 3D 盒子

问题描述

如何使用纯 CSS 创建 3D 框？

带有黑色边框的 3D 白色立方体

标签： htmlcss

解决方案

CSS 2D 变换

您需要使用skew()方法和flexbox来实现它。

body {
  --border: 4px;
  --width: 400px;
  --height: 100px;
  --outline: 12px;
  --translate: 8px;
  --skew-angle: 45deg;
}

.border {
  border: var(--border) solid black;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.box {
  width: var(--width);
  height: var(--height);
}

.bottom-outline {
  width: var(--width);
  height: var(--outline);
  border-top-width: 0px !important;
  transform: skew(var(--skew-angle)) translateX(var(--translate));
}

/* height would be implicitly same as box */
.right-outline {
  width: var(--outline);
  border-left-width: 0 !important;
  border-bottom-width: 0 !important;
  transform: skew(0deg, var(--skew-angle)) translateY(var(--translate));
}
<body>
  <div class="flex-row">
    <div class="box border"></div>
    <div class="right-outline border"></div>
  </div>
  <div class="bottom-outline border"></div>
</body>

推荐阅读