漂浮的貓和立方體

我迫不及待地想要一些「空閒」時間，這樣我就可以為我的專案添加樣式。一點點互動性可以為頁面增添活力。

你想要一隻漂浮的貓嗎？沒問題。我使用 AI 製作了一張貓的圖像，並在 Illustrator 中「手動」提取了背景，為我的 .png 圖像獲得了漂亮的剪切效果。嘭。貓。

讓他移動一點，這樣他看起來就像是漂浮的。我最喜歡的 CSS 動畫之一是軌道。它真的很有用，你可以用它做很多事情。

---

貓

在視圖中，我將我的貓的圖像帶入並為其分配“貓”類

現在，在我的 css 檔案中，我建立了「cat」的樣式。在 cat 中，我們將我們的動畫稱為“軌道”，如下所示。

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
} 

在這裡您可以看到，我們“從 0 度角度開始旋轉貓”，距離 x 原點 15px，從 0 度開始。

貓咪在 15px 處繞了一整圈 360 度，一直繞了一圈。 -360 的第二次旋轉抵消了第一次旋轉，使貓保持直立。如果你只看動畫就更容易了。 XD。

我們只是稍微移動了他，因為我們不希望他在頁面上飛來飛去。足以令人興奮。

往左一點，



向右一點。

魔法！

---

立方體

我之前學過如何用 css 創建立方體。雖然這很好，但我今天有了一個瘋狂的想法，以動態的方式重新使用立方體。我想用即時數據填充立方體表面。就像說，接下來的一些即將發生的事件。就像在登陸頁面上發現一件有趣的事情一樣。為什麼不呢。這很令人興奮。

因此，我在視圖中建立了骨架。我們的立方體畢竟需要一個家。

我有一些單選按鈕，以便使用者可以與多維資料集互動。

每個單選按鈕都會顯示不同的立方體。

我循環添加我想要在每個面上顯示的資訊：

  <div>




<hr>

<p>Handling the css is a bit of a dance. Especially with viewports and what not. This is not the answer for mobile but it will work and be functional on a bigger screen, LOL. I'm just gonna leave this here for you. Open to suggestions for handling a small screen size. <br>
</p>
<hr>



<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429456116557.jpg" class="lazy" alt="Floating Cats and Cubes"><br>
<br><br>
</p>

<pre class="brush:php;toolbar:false">
/*===========
rotating cube
==============*/

.cube-container {
  width: 30vw;
  height: 40vh;
  text-align: center;
  perspective: 100em;    
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  border: 5px solid transparent;  
  margin-top:100px; 
  display: block;
}

.cube-side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgb(64, 0, 148);
  border: 1px solid white;
  background-position: center;
  background-size: cover;
  border: 4px solid lime;
}

.cube-side:nth-child(1){
  transform: rotateY(0deg) translateZ(10em);
}

.cube-side:nth-child(2){
  transform: rotateY(90deg) translateZ(10em);
}

.cube-side:nth-child(3){
  transform: rotateY(180deg) translateZ(10em);
}

.cube-side:nth-child(4){
  transform: rotateY(-90deg) translateZ(10em);
}

.cube-side:nth-child(5){
  transform: rotateX(90deg) translateZ(9.75em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}

.cube-side:nth-child(6){
  transform: rotateX(-90deg) translateZ(9.3em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}


/* cube radio buttons */

.radio-button {
  transform: translateX(-50px);
}

.radio-button:checked ~ .cube{
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19. 1, 0.22, 1);
}

.radio-button:nth-child(1):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(20deg);
}

.radio-button:nth-child(2):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(180deg);
}

.radio-button:nth-child(3):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(90deg);
}

.radio-button:nth-child(4):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(-90deg);
}

.radio-button:nth-child(5):checked ~ .cube {
  transform: rotateX(-105deg) rotateY(0deg);
}

.radio-button:nth-child(6):checked ~ .cube {
  transform: rotateX(75deg) rotateY(0deg);
}

每個按鈕和側面都是單獨處理的。我很想看到一個更優雅的解決方案（如果存在）。

我真的很興奮它成功了。

感謝您的瀏覽！

以上是漂浮的貓和立方體的詳細內容。更多資訊請關注PHP中文網其他相關文章！