CODEWITHSUNDEEP
csssvgsafaricss-transforms
niklas
niklas

Reputation: 3011

css 3d rotate safari / chrome bug

I am trying to create a house with an opening door svg animation. I tried for hours to get the same result on firefox, safari, chrome. But it seems I cannot get it to work on safari, see the snippet below. I want the door to open like in the image with a pointed angle at the bottom.

enter image description here

* {
  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>

Upvotes: 0

Views: 244

Answers (1)

Liftoff
Liftoff

Reputation: 25412

Add a skewY to make the upward movement.

* {
  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>

Upvotes: 2

Related Questions