我有一個簡單的div，它有背景顏色和文本。在狀態改變時，我在DOM中更新這個元素，使其具有不同的背景顏色和文本(通過HTMX完成)。我想使用Chrome的新視圖轉換API，以便這兩個div之間的轉換具有垂直翻轉效果。

我使用下面的代碼基本上做到了這一點:

@keyframes flip-in {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes flip-out {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

::view-transition-old(flip-me) {
  animation: flip-out 0.3s;
}
::view-transition-new(flip-me) {
  animation: flip-in 0.3s;
}

.flip-container {
  position: relative;
  width: 300px;
  height: 3rem;
}

.flip-me {
  view-transition-name: flip-me;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

<div class="flip-container">
  <!-- Starting Div -->
  <div class="flip-me old-color">
    Old Text
  </div>
  <!--This div replaces the one above in the transition --> 
  <div class="flip-me new-color">
    New Text
  </div>
</div>

最后，這是一個簡單的包括不透明的動畫:

@keyframes flip-in {
  0%{
    opacity: 0;
    transform: rotateX(-180deg);  
  }
  100%{
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flip-out {
  0%{
    transform: rotateX(0deg);
    opacity: 1;
  }
  99%{
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(180deg);
    opacity: 0;
  }
}