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

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

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

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

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

你可能會認(rèn)為我們需要堆疊同一個(gè)圖像的兩個(gè)版本來實(shí)現(xiàn)這一點(diǎn)，但事實(shí)并非如此！這個(gè)效果是用一張圖片和幾行CSS實(shí)現(xiàn)的“假”視差效果。是的，我稱之為“假”效果，因?yàn)樗皇钦嬲囊暡顚?shí)現(xiàn)，而是欺騙你的大腦認(rèn)為它是運(yùn)動(dòng)的組合！如果你想在工作中看到“真實(shí)的”視差，斯拉詹的這支筆就是一個(gè)很好的例子.

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


首先，我們在圖像的頂部和底部添加一些填充，并應(yīng)用outline那是半透明的黑色。再是我們應(yīng)用一個(gè)負(fù)數(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)建了一個(gè)變量，--d，它控制的厚度outline。這就是賦予圖像深度的東西。最后一步是添加clip-path。為此我們需要一個(gè)有八個(gè)點(diǎn)的多邊形。

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