transform-originが効いていないように見える。

Question

<div class="cont ">
    <div class="panel-1 ">表</div>
    <div class="panel-2 "></div>
</div>


.cont {

  width: 80px;
  height: 80px;

  font-size: 36pt;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 200px;
  animation: rotate 2s linear ;
  transform-origin: left,bottom,-10px;
}
.panel-1 {
  position: absolute;
  width: 80px;
  height: 80px;

  transform-origin: left,bottom,-10px;
  backface-visibility: hidden;
}
.panel-2 {
  position: absolute;
  width: 80px;
  height: 80px;

  transform-origin: left,bottom,-10px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

transform-origin: left,bottom,-10px;を指定しても軸の位置が中心のまま変わらないように見えます。

ブラウザを変えても同じでした。

よろしくお願いします。

Answer 1

少なくともカンマ,が不要です。

【transform-origin - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin

Comments

[keraker]

ありがとうございます。
つい癖でつけてしまいましたが、不要なのですね。
エディタではエラーにならなかったので気づきませんでした。