3d旋轉特效html源碼，用HTML和CSS實現效果特效

雲端運算與程式碼 2023年05月15日 13:24 1.1K+ 訪客

以下是一組用HTML和CSS實現3D旋轉特效的代碼例子：

3d旋轉特效html源碼，用HTML和CSS實現效果特效第1张

<!DOCTYPE html>
<html>
  <head>
    <title>3D旋轉魔方相冊示例</title>
    <style>
     .cube-wrapper {
   position: relative;
   width: 200px;
   height: 200px;
   perspective: 800px;
}
.cube {
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;
   height: 200px;
   transform-style: preserve-3d;
   transition: transform .5s;
}
.side {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #fff;
   opacity: 0.8;
   border: 1px solid #888;
}
.front {
   transform: translateZ(100px);
}
.back {
   transform: rotateY(180deg) translateZ(100px);
}
.right {
   transform: rotateY(90deg) translateZ(100px);
}
.left {
   transform: rotateY(-90deg) translateZ(100px);
}
.top {
   transform: rotateX(90deg) translateZ(100px);
}
.bottom {
   transform: rotateX(-90deg) translateZ(100px);
}
.cube-wrapper:hover .cube {
   transform: rotateX(45deg) rotateY(45deg);
}
    </style>
  </head>
  <body>
    <h1>3D旋轉魔方相冊</h1>
    <div class="cube-wrapper">
   <div class="cube">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side right"></div>
      <div class="side left"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
   </div>
</div>
  </body>
</html>

這段代碼實現了一個立方體的3D旋轉特效。首先，我們通過父元素的`perspective`來定義透視視圖。然後定義了一個立方體的六個面，每一個面通過`transform`屬性來實現不同的3D效果，比如`translateZ`表示沿著z軸平移，`rotateY`表示繞y軸旋轉，`opacity`表示透明度。最後，在父元素的`hover`狀態下，通過`transform`實現了整個立方體的旋轉效果。

在這個例子中，通過CSS3的transform和transition屬性，可以神奇的實現3D旋轉效果，如何變幻奇妙，讓人眼前一亮。