中文av在线高清不卡观看,欧美黄色一级黄片

技術(shù)頻道 - html技術(shù)

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

作者:admin 時間:2023-2-7 12:19:2 瀏覽:

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

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

demo download

實例介紹：立方滑塊

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

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

.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)開始，在每個狀態(tài)上，在特定軸上附加一個新的旋轉(zhuǎn)，直到達(dá)到六次旋轉(zhuǎn)。然后回到第一張圖片。

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

.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); }

里面的逗號為什么用var()？是打錯了嗎？

這不是打字錯誤，所以不要刪除它！如果刪除它，你會注意到它會影響第一張圖片的位置。你可以看到，在代碼中，--_t為除第一個圖像之外的所有圖像都定義了，該逗號使變量退回到空值。沒有逗號，將沒有回退，整個值將無效。

注意：var(--a,)是一個有效函數(shù)，指定如果--a自定義屬性無效或缺失，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>