CSS Perspective：如何為您的網站增添層次感和深度

CSS Perspective是一種CSS屬性，用於在2D或3D空間中定位元素並為網站添加層次感和深度。通過使用透視效果和沿Z軸旋轉元素，您可以創建視覺上引人注目的頁面

一、CSS Perspective的基礎

要使用CSS Perspective，首先必須了解一些CSS元素的基礎知識

1、透視

在2D平面上看，透視是一種從遠處到近處逐漸變大的效果。在CSS中，通過為容器元素添加perspective屬性來實現透視效果。

.container {
  perspective: 1000px;
}

perspective屬性接受一個數值，用於確定透視距離，這個值越大，則元素離觀察者越遠，較小的值將產生更大的視差效果，越接近於二維平面。

2、transform-origin

transform-origin屬性用於確定元素變換的中心點位置，默認值為元素的中心點，可以通過使用一對坐標值——一個X和一個Y來確定中心點的位置

.container {
  perspective: 1000px;
  transform-origin: center top;
}

3、transform-style

transform-style屬性指定被嵌套元素如何在三維空間中呈現：flat、preserve-3d。preserve-3d值表示被嵌套的元素保持透視變換.

.container {
  perspective: 1000px;
  transform-origin: center top;
  transform-style: preserve-3d;
}

二、CSS Perspective的應用

1、 transfrom ：rotateX/Y

通過rotateX/Y的旋轉定位，可以改變元素在三維空間位置，從而給人們傳達出瀏覽到頁面的三維空間.舉個例子，我們旋轉一個方格，讓它看上去像是在斜坡上

.box {
  transform: rotateX(45deg);
}

2、transfrom ：translateZ（位移）

另一個影響CSS perspective的屬性是translateZ。transform: translateZ(n)的效果類似於transform: translateY(n)和transform: translateX(n)，不過只是沿著Z軸的方向移動元素

.box {
  transform: translateZ(-50px);
}

3、transfrom ：scaleZ（比例）

scaleZ是可以為元素創建錐形效果的屬性。通過將scaleZ屬性設置為0，使元素收縮到平面上。通過將scaleZ屬性設置大於0的值，可以將元素擴大並創建錐形效果

.box {
  transform: scaleZ(1.5);
}

三、CSS Perspective的應用案例

1、3D按鈕

使用CSS perspective，可以為按鈕添加逼真的3D效果，從而吸引用戶的注意力。一個常見的技巧是將按鈕元素向上翻轉，使其看起來像是從底部出現並準備進行互動操作

.btn {
  position: relative;
  display: inline-block;
  perspective: 100px;
  transform-origin: center center;
}

.btn span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.3s ease-out;
}

.btn:hover span {
  transform: rotateX(-90deg);
}

.btn .back {
  transform: rotateX(90deg);
}

2、3D圖片輪播

使用CSS perspective還可以創建3D效果的圖片輪播，通過在x、y和z軸上旋轉圖像並將其放置在透視容器中，可以為用戶提供更為生動的瀏覽體驗

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 12s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 70vh;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center -200px;
  transition: transform 1s;
}

.carousel-item.active img {
  transform: translateZ(300px);
}

3、3D盒子效果

通過使用CSS perspective，我們可以使用一些簡單的CSS技巧來創建立方體。為了在3D空間中定位和旋轉元素，我們需要使用一些不同的CSS屬性。這個例子是一個帶有立方體效果式樣的3D盒子

.box-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
  perspective: 2000px;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
}

.front {
  transform: translateZ(250px);
}

.back {
  transform: translateZ(-250px) rotateY(180deg);
}

.top {
  transform: rotateX(90deg) translateZ(250px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(250px);
}

.left {
  transform: rotateY(-90deg) translateZ(250px);
}

.right {
  transform: rotateY(90deg) translateZ(250px);
}

以上是一些CSS Perspective的應用案例，當然還有更多，不過這些例子足以讓您在使用CSS perspective時有一個良好的起點。