1. 首页
  2. 科技
  3. 正文

26.HTML 2D和3D變換

2024年2月6日 21点热度 0人点赞

在HTML5和CSS3的世界裡，2D和3D變換為網頁設計帶來了革命性的變化。通過簡單的CSS屬性，我們可以實現元素的平移、旋轉、縮放和傾斜等效果，從而創造出更加動態和交互性的用戶體驗。在本文中，我們將探索2D和3D變換的基本概念，並通過一些實例來演示它們的應用。

2D變換

2D變換是指在平面內對元素進行操作，包括平移（translate）、旋轉（rotate）、縮放（scale）和傾斜（skew）。以下是一些基本的2D變換例子：

平移（Translate）

.translate-example {
  transform: translate(50px, 100px);
}

這個例子中，元素將沿X軸移動50像素，沿Y軸移動100像素。

旋轉（Rotate）

.rotate-example {
  transform: rotate(45deg);
}

在這個例子中，元素將圍繞其中心點旋轉45度。

縮放（Scale）

.scale-example {
  transform: scale(2, 3);
}

此處，元素的寬度放大到原來的2倍，高度放大到原來的3倍。

傾斜（Skew）

.skew-example {
  transform: skew(30deg, 20deg);
}

這個例子將使元素沿X軸傾斜30度，沿Y軸傾斜20度。

3D變換

3D變換引入了新的維度，即Z軸，為元素添加了深度感。3D變換包括3D平移（translate3d）、3D旋轉（rotateX/rotateY/rotateZ）、3D縮放（scale3d）等。

3D平移（Translate3D）

.translate3d-example {
  transform: translate3d(50px, 100px, 200px);
}

在這個例子中，元素沿X軸移動50像素，沿Y軸移動100像素，同時沿Z軸移動200像素，產生一種深入屏幕的效果。

3D旋轉（Rotate3D）

.rotate3d-example {
  transform: rotateX(45deg);
}

這裡，元素將圍繞X軸旋轉45度，創建出一個“翻頁”的效果。

3D縮放（Scale3D）

.scale3d-example {
  transform: scale3d(2, 2, 2);
}

此例中，元素在三個維度上均放大兩倍。

實戰例子

讓我們通過幾個具體的例子來看看2D和3D變換在實際應用中的效果。

例子1：創建一個簡單的卡片翻轉效果（2D）

<div class="card">
  <div class="card-front">前面</div>
  <div class="card-back">背面</div>
</div>

.card {
  width: 200px;
  height: 300px;
  position: relative;
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}
.card-front {
  background-color: #fff;
  z-index: 2;
}
.card-back {
  background-color: #f1f1f1;
  transform: rotateY(180deg);
}
.card:hover .card-front {
  transform: rotateY(-180deg);
}
.card:hover .card-back {
  transform: rotateY(0deg);
}

當鼠標懸停在卡片上時，前面的卡片會翻轉到背面。

例子2：3D旋轉立方體

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">後</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
}
.front  { transform: translateZ(100px); }
.back   { transform: translateZ(-100px) rotateY(180deg); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

這個立方體會在頁面上無限旋轉，展示了一個基本的3D效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D & 3D Transform Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
  }
  .btn-2d {
    padding: 10px 20px;
    margin: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s ease;
  }
  .btn-2d:hover {
    transform: rotateZ(360deg);
  }
  .card-3d {
    width: 200px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
    margin: 20px;
  }
  .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }
  .card-3d:hover .card-inner {
    transform: rotateY(180deg);
  }
  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .card-front {
    background: #007bff;
  }
  .card-back {
    background: #ff5722;
    transform: rotateY(180deg);
  }
  .scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
    margin: 20px;
  }
  .cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-45deg);
    animation: rotateCube 5s infinite linear;
  }
  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
  }
  .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); }
  @keyframes rotateCube {
    0% { transform: rotateX(-30deg) rotateY(-45deg); }
    100% { transform: rotateX(-30deg) rotateY(315deg); }
  }
</style>
</head>
<body>
<button class="btn-2d">Click Me!</button>
<div class="card-3d">
  <div class="card-inner">
    <div class="card-face card-front">
      Front Side
    </div>
    <div class="card-face card-back">
      Back Side
    </div>
  </div>
</div>
<div class="scene">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>
</body>
</html>

  • .btn-2d 類定義了一個按鈕，當鼠標懸停時，它會應用一個 2D 旋轉 (rotateZ) 動畫。
  • .card-3d 類定義了一個 3D 翻轉卡片的容器，設置了 perspective 屬性，這是實現 3D 翻轉效果的關鍵。
  • .card-inner 類定義了卡片的內部元素，它將在鼠標懸停時圍繞 Y 軸旋轉 (rotateY) 180 度，這是通過 .card-3d:hover .card-inner 選擇器設置的。
  • .card-face 類定義了卡片的正反兩面，使用了 backface-visibility 屬性來在翻轉時隱藏背面。
  • .card-front 和 .card-back 類為卡片的前後面分別設置了不同的背景顏色。
  • .scene 類定義了一個 3D 場景的容器，設置了 perspective 屬性，以便為其中的 3D 對象創建透視效果。
  • .cube 類定義了正方體的容器，它使用 transform-style: preserve-3d 來保持其子元素的 3D 空間位置。這個容器還應用了一個連續旋轉的動畫，使正方體不斷旋轉。
  • .face 類定義了正方體的每個面，每個面都是一個絕對定位的正方形，具有邊框和背景顏色。
  • .front、.back、.right、.left、.top 和 .bottom 類分別定義了正方體的六個面的位置，每個面都通過 translateZ 被推到其應在的位置。

結語

通過本文的介紹，我們了解了2D和3D變換的基本概念以及它們在實際應用中的一些例子。隨著技術的進步，現代瀏覽器對這些效果的支持越來越好，而我們作為開發者，可以利用這些工具創造出更加豐富和生動的網頁體驗。記得在使用這些技術時保持平衡，確保它們增強而不是幹擾用戶的體驗。

标签：
最后更新：2024年2月7日
傳記片《粉碎機》首曝劇照 道恩·強森解鎖新皮膚 兩部《加勒比海盜》電影開發中!沙丘表舅或將主演 木村光熙出演大尺度劇情片 《碰觸》激吻冰島男星 R級恐怖片！尼古拉斯·凱奇主演《長腿怪》曝預告 《瑪克辛》曝海報 米婭·高斯再續X恐怖系列三部曲 首部殯儀主題港片!黃子華許冠文《破·地獄》曝海報 蓋里奇《盟軍敢死隊》曝預告 亨超帶隊燃炸開大！ 實現懸疑題材新探索 《微暗之火》研討會在京舉行 《死侍3》曝新預告 小賤賤彩蛋秀語速「嘲」漫威 國際歌劇電影展啟幕 《茶花女》等走進300家院線

COPYRIGHT © 2024 星辰資訊网. ALL RIGHTS RESERVED.