3D Box Shadow effect

Question

So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below.

The effect I\'m trying to achieve is a 3D box shadow, as shown in

Answer 1

Here is a real 3D shadow using perspective and pseudo-element :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)
}