技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

CSS 3D立方滑塊，垂直和水平無(wú)限循環(huán)滾動(dòng)

作者:admin    時(shí)間:2023-2-7 12:19:2    瀏覽:

在上一文中，我介紹了兩個(gè)CSS 3D滑塊，水平方向或垂直方向無(wú)限循環(huán)滾動(dòng)，上文介紹的3D滑塊，滾動(dòng)方向是單一的，水平方向或者垂直方向。在本文中，我將更進(jìn)一步，介紹一個(gè)CSS 3D立方滑塊，垂直和水平混合無(wú)限循環(huán)滾動(dòng)。

有關(guān)CSS 3D滑塊系列，一共介紹了幾個(gè)實(shí)例，你或許也有興趣看看：

demodownload

實(shí)例介紹：立方滑塊

這個(gè)版本的滑塊背后的想法是用圖像創(chuàng)建一個(gè)實(shí)際的立方體形狀，并圍繞不同的軸旋轉(zhuǎn)整個(gè)物體。因?yàn)樗且粋€(gè)立方體，所以要處理六個(gè)面。使用六張圖片，一張代表立方體的每個(gè)面。

因?yàn)橛辛鶄€(gè)面，所以需要至少執(zhí)行六次旋轉(zhuǎn)，以便每張圖像都轉(zhuǎn)一圈。實(shí)際上，我們需要五次旋轉(zhuǎn)——最后一次將帶回第一張圖像的面。如果你去拿一個(gè)魔方——或者像骰子這樣的其他立方體形狀的物體——然后用手旋轉(zhuǎn)它，你就會(huì)很清楚在做什么。

.gallery {
  --s: 250px; /* the size */

  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

@keyframes r {
  0%, 3%   { transform: var(--_p); }
  14%, 19% { transform: var(--_p) rotateX(90deg); }
  31%, 36% { transform: var(--_p) rotateX(90deg) rotateZ(90deg); }
  47%, 52% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  64%, 69% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  81%, 86% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  97%, 100%{ transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
}

該transform屬性從零旋轉(zhuǎn)開(kāi)始，在每個(gè)狀態(tài)上，在特定軸上附加一個(gè)新的旋轉(zhuǎn)，直到達(dá)到六次旋轉(zhuǎn)。然后回到第一張圖片。

不要忘記圖像的位置，使用以下方法將每個(gè)transform應(yīng)用到立方體的一個(gè)面上：

.gallery img {
  grid-area: 1 / 1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(2) { --_t: rotateX(-90deg); }
.gallery img:nth-child(3) { --_t: rotateY( 90deg) rotate(-90deg); }
.gallery img:nth-child(4) { --_t: rotateX(180deg) rotate( 90deg); }
.gallery img:nth-child(5) { --_t: rotateX( 90deg) rotate( 90deg); }
.gallery img:nth-child(6) { --_t: rotateY(-90deg); }

里面的逗號(hào)為什么用var()？是打錯(cuò)了嗎？

這不是打字錯(cuò)誤，所以不要?jiǎng)h除它！如果刪除它，你會(huì)注意到它會(huì)影響第一張圖片的位置。你可以看到，在代碼中，--_t為除第一個(gè)圖像之外的所有圖像都定義了，該逗號(hào)使變量退回到空值。沒(méi)有逗號(hào)，將沒(méi)有回退，整個(gè)值將無(wú)效。

注意：var(--a,)是一個(gè)有效函數(shù)，指定如果--a自定義屬性無(wú)效或缺失，var()則應(yīng)將 ` 替換為空。

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
<style>
.gallery {
  --s: 250px; /* the size */
  
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.gallery img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
}
.gallery img:nth-child(2) {--_t: rotateX(-90deg)}
.gallery img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.gallery img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.gallery img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.gallery img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,3%   {transform: var(--_p)}
  14%,19% {transform: var(--_p) rotateX(90deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotateZ(90deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg)}
  97%,100%{transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #556270;
  animation: b 9s infinite;
}

@keyframes b {
  0%,3%   {background: #774F38}
  14%,19% {background: #C5E0DC}
  31%,36% {background: #036564}
  45%,55% {background: #B38184}
  64%,69% {background: #424254}
  81%,86% {background: #4DBCE9}
  97%,to  {background: #774F38}
}
</style>

</head>

<body>

<div class="gallery">
  <img src="1-300x300.jpg" >
  <img src="2-300x300.jpg" >
  <img src="3-300x300.jpg" >
  <img src="4-300x300.jpg" >
  <img src="5-300x300.jpg" >
  <img src="6-300x300.jpg" >
</div>

</body>

</html>

總結(jié)

本文介紹了一個(gè)CSS 3D立方滑塊，垂直和水平混合無(wú)限循環(huán)滾動(dòng)。如果你只需要單方向滾動(dòng)——垂直方向無(wú)限循環(huán)滾動(dòng)，或者水平方向無(wú)限循環(huán)滾動(dòng)，那么可以看此文《CSS 3D滑塊動(dòng)畫(huà)效果(水平或垂直方向無(wú)限循環(huán)滾動(dòng))》。

相關(guān)文章

標(biāo)簽: css  3D滑塊  滑塊  
x