设计带有阴影，旋转和透视的3D网站

Question

我想使用html和css制作下面的图片。我搜索了perspective，rotate，skew＆amp; box-shadow。

我有几个问题：

1. 两个box-shadow重叠。
2. 我无法像下面的图片一样倾斜盒子阴影。（我怎样才能用skew()倾斜它）
3. 我如何使用3D效果（我设计的设计看起来很业余，你对我有什么建议吗？）
4. 当可打开的元素如下拉列表打开时它应该位于其他元素之上。



.wrapper {
  width: 400px;
  height: 300px;
  perspective: 1000px;
  margin: 4em auto;
  perspective-origin: 10% 35%;
}
.inner {
  height: 200px;
  width: 300px;
  text-align: center;
  box-shadow: 0 0 5px gray;
  transition: .3s;
  transform: rotateY(30deg);
  padding: 10px;
  border: 0.3px solid gray;
  box-shadow: -10px 10px 5px gray, -10px -10px 5px gray;
}
.dropdown {
  width: 50%;
  margin-left: 20%;
}
.dropdown button {
  box-shadow: -2px 1px 2px gray, -2px -1px 2px gray;
}
.dropdown button:hover,
.dropdown .dropdown-menu {
  box-shadow: -3px 1px 6px gray, -3px -1px 6px gray;
  transition: ease-in-out .3s;
}
#try {
  border-style: solid;
  box-shadow: -3px 1px 6px gray, -3px -1px 6px gray;
  height: 35%;
  width: 85%;
  margin: 10px;
}
#try:hover {
  box-shadow: -5px 3px 20px gray, -5px -3px 20px gray;
  transition: ease-in-out .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="inner">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown Example
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a>
        </li>
        <li><a href="#">CSS</a>
        </li>
        <li><a href="#">JavaScript</a>
        </li>
      </ul>
    </div>
    <div id="try" class="btn btn-default" href="">click</div>
 </div>
</div>