深入淺出：scale3d的使用與實戰

一、 scale3d是什麼

scale3d是CSS3中Transform屬性的一個函數，用於在三個維度上縮放一個元素。它的語法為：scale3d(x, y, z)。其中，x、y、z坐標是三個方向上的縮放比例。

與scaleX、scaleY、scaleZ函數分別控制單個軸相比，scale3d函數可以比較方便地控制元素在三個方向上的變化，尤其在3D動畫、形變效果的開發中，scale3d應用非常廣泛。

二、scale3d的基本用法

在CSS中，我們可以通過如下代碼來實現scale3d的基本使用：

.element {
  -webkit-transform: scale3d(2, 1.5, 0.5);
  -moz-transform: scale3d(2, 1.5, 0.5);
  -ms-transform: scale3d(2, 1.5, 0.5);
  -o-transform: scale3d(2, 1.5, 0.5);
  transform: scale3d(2, 1.5, 0.5);
}

上述代碼表示將元素的x軸方向縮放2倍，y軸方向縮放1.5倍，z軸方向縮放0.5倍。當我們將x軸、y軸與z軸上的縮放比例分別設置為1時，元素就不會發生任何縮放和變形。

三、scale3d在動畫中的應用

相對於scaleX、scaleY、scaleZ函數，scale3d函數更常用於3D動畫、形變效果的開發。下面我們將通過實際的案例來演示scale3d在動畫中的應用。

案例展示

下面我們通過一段動畫來演示scale3d在動畫中的應用，實現一個卡片翻轉的效果。

 .flip-container {
 -webkit-perspective: 1000px;
 perspective: 1000px;
 margin: 80px;
 }
 .flip-container:hover .flipper, .flip-container.hover .flipper {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
 }
 .flipper {
 -webkit-transform: scale3d(0.8, 0.8, 0.8);
 transform: scale3d(0.8, 0.8, 0.8);
 transition: 0.6s;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 position: relative;
 }
 .front, .back {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 width: 100%;
 height: 100%;
 }
 .front {
 z-index: 2;
 background: #fff;
 }
 .back {
 -webkit-transform: rotateY(180deg);
 transform: rotateY(180deg);
 background: #2ecc71;
 }
 .flip-container:hover .flipper, .flip-container.hover .flipper {
 -webkit-transform: rotateY(180deg);
 transform: rotateY(180deg);
 }
Front Side
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/245465.html