css 3d 旋转 safari / chrome bug

Question

我正在尝试创建一个带有开门 svg 动画的房子。我尝试了几个小时以在 firefox、safari、chrome 上获得相同的结果。但似乎我无法让它在 safari 上运行，请参阅下面的 sn-p。我希望门像图片中那样打开，底部有一个尖角。

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

svg {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  background: #f2f;
  stroke: #000;
  width: 200px;
  height: 200px;
  -webkit-perspective-origin: 100% 0;
  perspective-origin: 100% 0;
}

#door {
  position: relative;
  transition: transform 1s;
  -webkit-transform-origin: 180px center;
  transform-origin: 180px center;
  fill: #fff;
}

svg:hover #door{
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);;
}

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
            <g id="door">
              <rect id="door-rect" x="120" y="100" width="60" height="100" />
              <circle id="door-handle" cx="130" cy="150" r="5" />
            </g>
  </svg>
    </div>

Answer 1

添加一个 skewY 以向上移动。

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

svg {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  background: #f2f;
  stroke: #000;
  width: 200px;
  height: 200px;
  -webkit-perspective-origin: 100% 0;
  perspective-origin: 100% 0;
}

#door {
  position: relative;
  transition: transform 1s;
  -webkit-transform-origin: 180px center;
  transform-origin: 180px center;
  fill: #fff;
}

svg:hover #door{
  transform: rotateY(-45deg) skewY(10deg);
}

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
            <g id="door">
              <rect id="door-rect" x="120" y="100" width="60" height="100" />
              <circle id="door-handle" cx="130" cy="150" r="5" />
            </g>
  </svg>
    </div>