* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  position: relative;
}
#demo {
  display: none;
}

#canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}

.pic {
  width: 120px;
  height: 180px;
  border: 1px rgba(0, 0, 0, 0) solid;
  position: absolute;
  top: Calc((100vh - 500px) / 2);
  left: 50%;
  /*transform 旋转元素*/
  margin: auto auto;
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(-10deg) rotateY(0deg);
}
.pic img {

  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #fff;
  /*倒影的设置*/
  -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);
}