3D盒子阴影效果

Question

所以我知道如何用CSS3做一个基本的盒子阴影.您可以在下图中看到它.

我想要实现的效果是3D盒子阴影,如下图所示.

有关如何使用CSS3框阴影执行此操作的任何想法？

Answer 1

你可以使用伪元素作为阴影

div {
  background: black;
  height: 100px;
  width: 100px;
  position: relative;
}
div:after,
div:before {
  content: '';
  background: grey;
  position: absolute;
}
div:after {
  width: 100%;
  height: 20px;
  left: 10px;
  bottom: 0;
  transform: translatey(100%) skewx(45deg);
}
div:before {
  width: 20px;
  height: 100%;
  right: 0;
  transform: translatex(100%) skewy(45deg);
  top: 10px;
}

<div></div>

Answer 2

不幸的是,盒子阴影实际上只是平面层.但是,您可以应用多个框阴影来创建此效果.

.box-shadow-3d{
    box-shadow: 1px 1px 0px #999,
                2px 2px 0px #999,
                3px 3px 0px #999,
                4px 4px 0px #999,
                5px 5px 0px #999,
                6px 6px 0px #999;
}

Answer 3

这是一个真正的3D阴影使用perspective和伪元素:before.

body {
  background: lightblue;
}
.foo {
  position: relative;
  display: inline-block;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  persepctive: 1000px;
  margin: 20px;
  margin-top: 50px;
}
.foo .box {
  transform: rotateY(-40deg);
  height: 350px;
  width: 250px;
  background-color: black;
}
.foo:before {
  content: "";
  top: -15px;
  position: absolute;
  width: 50px;
  height: 375px;
  background-color: grey;
  transform: translateX(215px) translateY(2.7px) rotateY(55deg)
}

<div class="foo">
  <div class="box"></div>
</div>