如何隐藏旋转图像的一半

Question

该片段只是旋转给定的图像。实际上旨在隐藏前面可见图像后面的图像。

演示：https://codepen.io/athimannil/pen/EwpLXx

＆＃13;

＆＃13;

@keyframes turn {
  50% {
    transform: rotateX(5deg) rotateY(0.5turn);
  }
  100% {
    transform: rotateX(-5deg) rotateY(1turn);
  }
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

body .container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 700px;
}

body .container .carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 97px;
  margin-left: -70px;
  margin-top: -48.5px;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(0);
  animation: turn 20s infinite linear;
}

body .container .carousel .slide {
  position: absolute;
  width: 140px;
  height: 97px;
  user-select: none;
}

body .container .carousel .slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(2) {
  transform: rotateY(36deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(3) {
  transform: rotateY(72deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(4) {
  transform: rotateY(108deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(5) {
  transform: rotateY(144deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(6) {
  transform: rotateY(180deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(7) {
  transform: rotateY(216deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(8) {
  transform: rotateY(252deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(9) {
  transform: rotateY(288deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(10) {
  transform: rotateY(324deg) translateZ(280px);
}

＆＃13;

<div class="container">
  <div class="carousel">
    <img src="http://via.placeholder.com/300x200?text=01" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=02" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=03" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=04" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=05" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=06" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=07" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=08" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=09" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=10" alt="" class="slide">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用backface-visibility: hidden;

  

背面可见性CSS属性确定面向用户时元素的背面是否可见。元素的背面始终是透明背景，当可见时，显示正面的镜像。

     

^{MDN Reference}

Codepen Demo

body {
  margin: 0;
  overflow: hidden;
  background: #000;
}

body .container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 700px;
}

body .container .carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 97px;
  margin-left: -70px;
  margin-top: -48.5px;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(0);
  animation: turn 20s infinite linear;
}

body .container .carousel .slide {
  position: absolute;
  width: 140px;
  height: 97px;
  user-select: none;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

body .container .carousel .slide:nth-child(1) {
  transform: rotateY(0deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(2) {
  transform: rotateY(36deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(3) {
  transform: rotateY(72deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(4) {
  transform: rotateY(108deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(5) {
  transform: rotateY(144deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(6) {
  transform: rotateY(180deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(7) {
  transform: rotateY(216deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(8) {
  transform: rotateY(252deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(9) {
  transform: rotateY(288deg) translateZ(280px);
}

body .container .carousel .slide:nth-child(10) {
  transform: rotateY(324deg) translateZ(280px);
}

@keyframes turn {
  50% {
    transform: rotateX(5deg) rotateY(0.5turn);
  }
  100% {
    transform: rotateX(-5deg) rotateY(1turn);
  }
}

<div class="container">
  <div class="carousel">
    <img src="http://via.placeholder.com/300x200?text=01" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=02" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=03" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=04" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=05" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=06" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=07" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=08" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=09" alt="" class="slide">
    <img src="http://via.placeholder.com/300x200?text=10" alt="" class="slide">
  </div>
</div>

Answer 2

您可以使用backface-visibility: hidden;来确定面向用户时元素的背面是否可见。 如果您想要应用其他效果，例如不透明度渐变或其他效果，您可以考虑使用JavaScript。