隨著網(wǎng)站開發(fā)技術(shù)的不斷創(chuàng)新，現(xiàn)在網(wǎng)站上呈現(xiàn)出各種各樣的3D交互效果，這些特性增加了圖像的透視、深度、旋轉(zhuǎn)，甚至是化繁為簡。今天深圳尼高小編就和大家分享下不同的CSS制作效果。

我們都認為3D效果很酷對吧，尤其是和精妙的動畫結(jié)合在一起的時候。我們將探討三種不同的效果，它們彼此之間沒有聯(lián)系，但可能會互相借鑒。

第一CSS 3D閃耀，對于這個效果我們將為圖像添加一個閃光動畫，以及懸停時的輕微旋轉(zhuǎn)。圖像開始有點歪斜，但在懸停時變直，同時有一束光反射到表面。這是一個給UI增加一點真實感而又不過分的好方法。

rotate3d允許我們定義圖像旋轉(zhuǎn)的軸。我不會深究數(shù)學(xué)細節(jié)，但為了得到一個對角線軸，我們讓z軸等于0和使用1或者-1對于x軸和y軸。
img {
  transform: perspective(400px) rotate3d(1, -1, 0, 8deg);
}
img:hover {
  transform: perspective(400px) rotate3d(1, -1, 0, -8deg);
}

然后，我們使用perspective屬性給圖像增加一點不平衡。的背后沒有特定的邏輯400px值或8deg適用于旋轉(zhuǎn)，但我發(fā)現(xiàn)一個小角度結(jié)合一個大視角給出了一個很好的結(jié)果。請隨意編輯它們，也許您會為您的特定用例找到更好的價值。我們可以簡化這個！避免重復(fù):hover，我們可以使用CSS變量來更新懸停時的角度符號。這樣，就沒有必要僅僅為了改變而重寫整個聲明8deg到-8deg。
img {
  transform: perspective(400px) rotate3d(1, -1, 0, calc(var(--i, 1) * 8deg));
}
img:hover {
  --i: -1;
}

第二CSS 3D視差，我們通常認為“視差”是我們用于有趣的滾動效果的東西，其中元素以不同的速度改變位置。但是我們可以用它來制作一個光滑懸停效果也影響了我們的形象。就像我們在上一節(jié)中制作的發(fā)光效果一樣，我們從一個稍微傾斜的圖像開始，在懸停時圖像變直。但是，我們沒有使用閃光，而是用一個過渡將圖像滑過一點點，使它看起來像焦點隨著圖像旋轉(zhuǎn)，增加了它的深度感。

你可能會認為我們需要堆疊同一個圖像的兩個版本來實現(xiàn)這一點，但事實并非如此！這個效果是用一張圖片和幾行CSS實現(xiàn)的“假”視差效果。是的，我稱之為“假”效果，因為它不是真正的視差實現(xiàn)，而是欺騙你的大腦認為它是運動的組合！如果你想在工作中看到“真實的”視差，斯拉詹的這支筆就是一個很好的例子.

第三CSS 3D旋轉(zhuǎn)，對于這一個，我將跳過旋轉(zhuǎn)部分，因為它與我們在上一個演示中所做的相同。讓我們轉(zhuǎn)而關(guān)注3D部分，使用outline和clip-path屬性。下圖說明了它們是如何組合在一起形成一個三維長方體的。


首先，我們在圖像的頂部和底部添加一些填充，并應(yīng)用outline那是半透明的黑色。再是我們應(yīng)用一個負數(shù)outline-offset這樣一來outline覆蓋圖像的左側(cè)和右側(cè)，但不覆蓋頂部和底部:img {
  --d: 18px;  /* depth */

  padding-block: var(--d);
  outline: var(--d) solid #0008;
  outline-offset: calc(-1 * var(--d));
}
注意，我已經(jīng)創(chuàng)建了一個變量，--d，它控制的厚度outline。這就是賦予圖像深度的東西。最后一步是添加clip-path。為此我們需要一個有八個點的多邊形。

我們希望你喜歡這個CSS 3D圖像效果的探索——甚至可能受到挑戰(zhàn)。我們使用了一整套高級CSS功能，包括蒙版、剪輯、漸變、過渡和計算，為你肯定不會每天看到的圖像制作了一些非常不可思議的懸停效果。