? ??? ?? ??? ??? ???? ???? ?? 3D ??? ???? ???? ?? ??? ???? JavaScript ??? ?? ??? ? ??? ?????.

HTML ? JavaScript? ?? ????? ???? ???? ??? ?? ??? ???? ???? ??? ? ??? ???? ?? ? ? ????. ?? ??, ?? ??, ?? ?? ? ??? ?? ?? ?? ??? ?? ?? ??? ?? ??? ???? ?? ?? ??? ??????? ??? ??? ?? ??? ?????.

?? ?? ?? ?? ?? ??? ????
• ??? ???? ?? ??? ??? ?????.
??? ??? ???? ? ????.
?? ?? ??? ???? ??
CSS??? ?? ?? ???? ?? ? ??? ???? ??? ???.
• ? ???? ?? ? ?? ?????? ???? ????? ?? ??? 3 ? ??? ???? ??? ????????? ???? ?? ? ? ??? ?? ????? ??? ?? ? ? ????. ???, ? ?? ???? ????? ?? ?? ??? ???, ????? ?? ???? ?? ? ????. ?????? ??, ??? ??? ??? ???? ??? ??? 3 ?? ???? ??? ?????. ??? ?? ?? ??? ??? ????.
? ??? ?? ???? ??? ??? ?? ? 3D ??? ???? ??? ???? ?? ?? ??? ?? ?? (???? ? ?????? ????? ??)? ????. , ?? ??? ??,

?? ???, ?? ?? ?? ????? ?? ?? z = 0? ???, ?? ???? ??? ??? ????? ??? ?? 2D ??? ????. ??? ?? D? CSS ?? ??? ?? ?????.

?? ?? ??? ?? ??

? ?????? ? ????? ?? CSS ??? ?? ??????. ???? ???????.

?? ?? ? ???? ?? SASS ??? ???? ?? ????? ?? ???? ? ? ???????. <p>? ???? ?? ??? ??? ?? ???? ???? ??? ???? ?? <strong>? ?????. </strong> </p> <p> ??? ? ?? ???? ?? ???? ?? ???? ???? ???? ?? ????????. ?? ?? ??? ?? ? ???? ??? ??? ???? ??? ??? ??? ? ????. </p> <p> ??? ?? ? ??? ?? ??? ??? ???? ?? ??? ???? (??? ?? ? ??? ???? ???????). ??? ????, ?? ? ???? ??? ??? ??? ?? ???? ?????. ?? <is>? ???? ?? ?? ??? ????. <code>$n ? ?? ???? ?? ?? ??, ? ?? ??? ??? ?? ??? ?? ??? ???? ????. $item-width ? ??? ?? ??? ???? 3D ???? ?? ??? ???? ? ????. ? ??? ???? ?? ??? ??????
? ?? ??-???? ?????.

? ?? CSS?? z ?? ?? ??? ??? ?? ??? ??? ??? ???? ?? ?????. SASS ?? ??? ???? ??? ?????. ??? ?? ??? ??? ??? ?????. <figure></figure> ??? ?? ???? ?? ? ?, ?? ?? ??? (???) y ? ??? ?? ?? ? ? ???? : .

?? ???? ??? ?? ??? ?? ? ???.

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

?? ???? ?? ?????. ?? ????? ???? ???? : ??? ????

z-index ?? ?? ??? ?? ?? ?? ??? ?????. ???, ? ???? ?? ?? ? ???? ??? ???? ?? ??? ???? y ? ???? ??? ???? ? ????. ??, <<> ??? ????? ???? ?? ??-???? ???? ???? ???? ?????? : .

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

???? ???? ?? ???? ??? y ?? ?? ??? ???? ? ????. ?? ?? π? ?????. ??? ? ?? ????

???? ? ?? ???? ($i - 1) * $theta ???? ??? ???? ?? ? ??? ?????. $i $theta = 2 * $PI / $n <<> $PI ?? CSS ??? ?? ? ???? ??? ???? ??? ??? ??? ? ?? ?? ????? (?, ? ?? ? y ?? ?? ??). $theta ? ???? ???? sass 2 * $theta ??? ? ?? ??? ?? ($n - 1) * $theta? ??? ??? ?? n ?? n-1?? ??? ??

??? ???? ????.

sass ' ?? ??? ? ????? ??????. ? ?? ??, ???? ????? ? ?????.

<<>

<figure>? ????? ???? ?? ??? ??? ????? ?? ????? ? ??? ??? ????

??? @for? ??? ?? ?????.

? ??? ?? ???? ???? ?? ?? ? ? ????. ?? ?? ?? ??? ??? ??? ??? SASS? ??? ? ???? ?? ?? ?? ???? ??? ???? ????. ??, ??? JavaScript ???? ??? ?????.

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

<<> ?? ?? ?? ?? for...through for...to ? ????, ??? ???? ??? "???"?? ??? ??? ??? ?????. ??? ???, ???? ??? ?? ???, 3D ?? ???? ?? ?? ??? ??? ????. ? ??? 3D ??? ??? ??????. ? ??? ??? ?? ???? ? ? ????. for...to ?? ?? ??? ???? ? ??? ?? ?? ???? ???? ??? ?? ??? ????? ?? ? ? ????. ? ?????? ?? ??? ??? ??? ???? ?????. $i ?? ??? ?? ???? ? ? ????. ???? ??? ?????? ?????? ??? ??? ? ? ???? ??? ?? ??? ??? ????? ???? ???? ???? ?????.

<<> ?? ?? ?? ?? #{} ??? ? ?? ??? ??? ?????? ?? ??? ???? ??? ???? ?? UI ???? ?????. (?? ? ?? ???? ????? ??? ??? ??? ???????.<<> ???

?? ??? ???? ?? ?? ?? ?? ???? ??? ?????. ???? ??/?? ??? ?? ??? ?? ??? ? ??? ????? ?????. currImage ???? ??, ??? ??? ??? ??? ?? ???? ?????.

(?? ? ?? ?? ? ???? ES6 ??? ???? ???? ???? ???? ??????. ??? ?? ??? "" "? ????? ???)

? ??? ? ????. currImage ???

? ??? ?????

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

<<> ??? ?? ???? ???? ???? ?? ?? ???? ???? ??? ?? ?? CSS ???? ?????.
??

??? ???? ??? ??? ? ??? ???? ???? ??? ?? ? ????. ???, ??? ???? ??? (SO )?? ???? ?? ??? ???? ? ?? ??? ??? ?? ? 0?? ????? ?? ??? theta?? 0?? ?????. , ?? ?? ????? ?? ??? ?? ???? ??????. ?? ???? ? ?? ??? ? ?? ?? ??? ???? ??? ??? ?????.

?? ?? ???? ??? ??? ??? ? ?? ?? ? ?? ???

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

? ??? ????? ???????. ? ??? ?? ???? ???? ????.

<<> JavaScript -theta ? ??????? ??? ???? ??? ???? ?? CSS? ? ?, ?? ? ?? JavaScript? ???? ??? ???? ?? ??? ???? ? ????.

?? ??? ? ???? ?? ?? ?? ?? ???? ? ?? ? ? ???? ?? ? ????? ?? currImage HTML5 Data-* ??? ??? ?? ?? [0, numImages – 1] currImage == n-1 ??, ??? ???? ??? ??? ???? ?? ??? ??? ??? ?????. ?? JavaScript? ???? ?????. ????, ????? currImage ??? ???? ???? ?????. (n-1)*theta
?? ??? ??? ?????? ???? DOM ??? ?????.

??? ??? ??? ???? ? ?? ?? ???? ?? ??? ???? ?????? ???? ??? ?????? ???? ???? ??? ???? ?????. currentImage ??? ????? ?? ?? ??? ???????? ??? ?? ?????? ? ??? ???? Number ??? ??

???? ?? ???? ??? ?? ? ??? ?? ??? <:> :

<<> ? ?? ?? ??? ?????? :

?? ??. ??? ? ?? CodePen ??? ?? ? ?? ??? ?????.
• <<> ?? ?? ??? ??? ??? ?? ??? ?? ???? ? ?? ???? ? ??? ??? ????? ?? ???? ????????.
?? ?? ??? ???? ?? ? ?? ?? ??? ???? ??? ???? ????? ??? ????.
• <(> ??? ? (n)? ??? ?? ??? ?? ?? ??????. ???? (?) ??? ??? html5
?? (??)?? ??????. ?? ??? ??? (BFC)? html5? <<> CSS ?? ??
CSS ?? ?? ??? ?????? ??? ? ??????. ? ?? ???? ? ?? ?? ??? ????. ? ??? ?? ?? ???? ?? ?, ? ??? ?? ? N ?????. ? ?? ?? ?? S? ??? ???? ?? ?????. ??? ????? ??? ???? ??? ????

: ? ???? ? ? ??? ?? ??? ?? ? ????.

<,> ?? ???, ??? ?? ???? ??? ??? ??? ? ????.

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

?? ?? ???? ????? ???? ?? ? ?? ?? ???? ?? ???? ??????.

???? ??, ?? ???? ???? ???. <figure> data-gap <<> ???? ? ?? ?? ?? ? ?? ??? ??? ?? ? ??? ???? ???? ?? ??? ???? ????. dataset ? ?? ???

? ???? ? ??? ??? ?? ?? ?? ? ?????.

??, ??? ???? ?????? : ? ?? ??? ??? ?? ??? ??? ??? ?????. ? ?? ??? 3D ??? ?????. ?? ???? ??? ????? ??? ??? ?? ??? ??? ??? ?????. <<> ?????,

? ???? ?? ???? ???? ??????. ??? ?? ? ???? ??? ??? ? ?? ??? ?????. y ??

??? ???? ?? ???? ???? ?????. ????? ????? ???? ??? ?????. setupCarousel() ??? ?? ?????. ? ???? ?? ?? ??? ?? ?? ???? ??????? ?????. <<> ??? ?? getComputedStyle() <,> ?? ??? ??? ????? ??? ?? ? ?? ??? ??????. (?? ??? ??? ????????)

?? ?? ??? ?????? ??? ?? ???? ??? ???? ?? ???? ?????.

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

CSS ? JavaScript??? 3D ??? ??? ?????? ?? ? ?? FAQ

3D ?? ??? ??? ?????? ???? ??? ??????

3D ?? ??? ??? ???? ????? CSS?? ??? ??? ???? ?? ?????. ??? ??? ???? ??? ?? ??? ?? ?? ??? ?? ???? ?? ? ? ????. ?? ??? ?? ??? ??? ??? ??? ??? ??? ? ????. ?? ???? ???? ?? ?? ??? ???? ??? ??? ?? ???? ??????.

?? ??? ? ?? ????? ?? ? ? ?????

?, ?? ??? ? ?? ????? ?? ? ? ????. HTML ????? ???? ?? ??? ? ?? ?? ??? ?? ? ? ????. ? ?? ??? ????? ?????. CSS?? ? ????? ?? ??? ???? 3D ??? ???? ???????.