CSS旋转图像

Question

简而言之：我试图模仿这个滑块但是有动画，而不是过渡，所以我可以有自动播放选项：codepen.io/dudleystorey/pen/HrFBx

说明： 我正在使用一个使用动画的CSS滑块。以下是CodePen上的链接：https://codepen.io/anon/pen/vZXQEa

编辑：我需要这个没有脚本

在代码中：

CSS：

    body { margin: 0; background: #121; }

figure { 
  margin: 0;
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  max-width: 1000px; 
  padding-bottom: 56.25%; 
}
figure img {
  top: 0;
  left: 0;
  position: absolute;
  transition: 1s;
  width: 100%;
}
      @keyframes rotateFirst {
        0%, 20%{
          transform: rotateY(0deg);
        }
        80%, 100%{
          transform: rotateY(180deg);
        }
      }
      @keyframes rotateSecond {
        0%, 20%{
          transform: rotateY(-180deg);
        }
        80%, 100%{
          transform: rotateY(0deg);
        }
      }
      .first{
        animation:rotateFirst 5s infinite;
      }
      .second{
        animation:rotateSecond 5s infinite;
      }

HTML：

  <figure id=blinds-window>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>

test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>

我有两个简单的挑战，因为我是CSS动画的新手：

1-图片无法正常旋转，在我的CodePen链接上很容易注意到。他们可能会一起搬家。
2-我想在图像上添加文字。我尝试添加＆＃39; test＆＃39;在图像上，但它不适合我。

提前谢谢！

Answer 1

您可以执行以下操作，在图中添加一个类（此处为anim）并更改 来自

的悬停规则

figure:hover img.first { transform: rotateY(180deg);  } 
figure:hover img.second { transform: rotateY(0deg) translateZ(1px);  }

到

figure.anim img.first {
  animation-name: rotateus;
  animation-duration: 1s;
  animation-fill-mode: forwards;
} 
figure.anim img.second { 
  animation-name: rotateus2;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

我还添加了@keyframes规则，并从transition-delay更改为animation-delay

已更新： 根据评论我还添加了一些文字

Stack snippet

＆＃13;

＆＃13;

body { margin: 0; background: #121; } 
figure { 
  margin: 0;
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  max-width: 1000px; 
  padding-bottom: 56.25%; 
}

body::before,
body::after { 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg) no-repeat left top;
  background-size: 100%;
}
body::after { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg) no-repeat left top;
  background-size: 100%;
  animation-name: swapbkg;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

div { 
  top: 0;
  left: 0;
  position: absolute;
  color: white;
  font-size: 40px;
  opacity: 1;
  z-index: 10;
  transform: translate(10px, 10px);
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
div:nth-of-type(2) { 
  animation-name: swaptext2;
}
div:nth-of-type(1) { 
  animation-name: swaptext1;
}


figure img { 
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

figure.anim img.first {
  animation-name: rotateus2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
} 
figure.anim img.second { 
  animation-name: rotateus;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes rotateus {
  0%, 80%, 100%  {
    transform: rotateY(0deg);
  }
  30%, 50% {
    transform: rotateY(180deg);
  }
} 
@keyframes rotateus2 {
  0%, 80%, 100%  {
    transform: rotateY(-180deg) translateZ(1px);
  }
  30%, 50% {
    transform: rotateY(0deg) translateZ(1px); 
  }  
}
@keyframes swapbkg {
  0%, 39% {
    z-index: -1;
  }
  40%, 80% {
    z-index: -2;
  }
} 
@keyframes swaptext1 {
  0%, 20%, 50%, 100% {
    opacity: 0;
  }
  25%, 45% {
    opacity: 1;
  }
} 
@keyframes swaptext2 {
  0%, 70%, 100% {
    opacity: 0;
  }
  75%, 95% {
    opacity: 1;
  }
} 

figure img:nth-child(1), figure img:nth-child(11) { 
  clip: rect(0px, 100px, 840px, 0px);
  transform-origin: 50px 0px;
}
figure img:nth-child(2), figure img:nth-child(12) {
  clip: rect(0px, 200px, 840px, 100px);
  transform-origin: 150px 0px;
  animation-delay: 100ms;
}
figure img:nth-child(3), figure img:nth-child(13) {
  clip: rect(0px, 300px, 840px, 200px);
  transform-origin: 250px 0px;
  animation-delay: 200ms;  
}
figure img:nth-child(4), figure img:nth-child(14) {
  clip: rect(0px, 400px, 840px, 300px);
  transform-origin: 350px 0px;
  animation-delay: 300ms; 
}
figure img:nth-child(5), figure img:nth-child(15) {
  clip: rect(0px, 500px, 840px, 400px);
  transform-origin: 450px 0px;
  animation-delay: 400ms;
}
figure img:nth-child(6), figure img:nth-child(16) {
  clip: rect(0px, 600px, 840px, 500px);
  transform-origin: 550px 0px;
  animation-delay: 500ms; 
}
figure img:nth-child(7), figure img:nth-child(17) {
  clip: rect(0px, 700px, 840px, 600px);
  transform-origin: 650px 0px;
  animation-delay: 600ms;
}
figure img:nth-child(8), figure img:nth-child(18) {
  clip: rect(0px, 800px, 840px, 700px);
  transform-origin: 750px 0px;
  animation-delay: 700ms;
}
figure img:nth-child(9), figure img:nth-child(19) {
  clip: rect(0px, 900px, 840px, 800px);
  transform-origin: 850px 0px;
  animation-delay: 800ms; 
}
figure img:nth-child(10), figure img:nth-child(20) {
  clip: rect(0px, 1000px, 840px, 900px);
  transform-origin: 950px 0px;
  animation-delay: 900ms;  
}

＆＃13;

<figure id=blinds-window class="anim">
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
</figure>

<div>Here is a text</div>
<div>Here is another text</div>

＆＃13;

＆＃13;

＆＃13;

如果要保留transition并使用脚本触发，请将悬停规则更改为此

figure.anim img.first { transform: rotateY(180deg);  } 
figure.anim img.second { transform: rotateY(0deg) translateZ(1px);  }

我还添加了一个事件处理程序，它在页面加载后添加了类

Stack snippet

＆＃13;

＆＃13;

window.addEventListener('load', function() {
  var fig = document.querySelector('figure');
  setTimeout(function () {
    fig.classList.add('anim');
  }, 500)
})

＆＃13;

body { margin: 0; background: #121; } 
figure { 
  margin: 0;
  position: relative;
  perspective: 1800px;
  transform-style: preserve-3d;
  max-width: 1000px; 
  padding-bottom: 56.25%; 
}
figure img { 
  top: 0;
  left: 0;
  position: absolute;
  transition: 1s;
  width: 100%;
}
figure img.first { transform: rotateY(0deg); }
figure img.second { transform: rotateY(-180deg) translateZ(1px); }

figure.anim img.first { transform: rotateY(180deg);  } 
figure.anim img.second { transform: rotateY(0deg) translateZ(1px);  }

figure img:nth-child(1), figure img:nth-child(11) { 
  clip: rect(0px, 100px, 840px, 0px);
  transform-origin: 50px 0px;
}
figure img:nth-child(2), figure img:nth-child(12) {
  clip: rect(0px, 200px, 840px, 100px);
  transform-origin: 150px 0px;
  transition-delay: 100ms;
}
figure img:nth-child(3), figure img:nth-child(13) {
  clip: rect(0px, 300px, 840px, 200px);
  transform-origin: 250px 0px;
  transition-delay: 200ms;  
}
figure img:nth-child(4), figure img:nth-child(14) {
  clip: rect(0px, 400px, 840px, 300px);
  transform-origin: 350px 0px;
  transition-delay: 300ms; 
}
figure img:nth-child(5), figure img:nth-child(15) {
  clip: rect(0px, 500px, 840px, 400px);
  transform-origin: 450px 0px;
  transition-delay: 400ms;
}
figure img:nth-child(6), figure img:nth-child(16) {
  clip: rect(0px, 600px, 840px, 500px);
  transform-origin: 550px 0px;
  transition-delay: 500ms; 
}
figure img:nth-child(7), figure img:nth-child(17) {
  clip: rect(0px, 700px, 840px, 600px);
  transform-origin: 650px 0px;
  transition-delay: 600ms;
}
figure img:nth-child(8), figure img:nth-child(18) {
  clip: rect(0px, 800px, 840px, 700px);
  transform-origin: 750px 0px;
  transition-delay: 700ms;
}
figure img:nth-child(9), figure img:nth-child(19) {
  clip: rect(0px, 900px, 840px, 800px);
  transform-origin: 850px 0px;
  transition-delay: 800ms; 
}
figure img:nth-child(10), figure img:nth-child(20) {
  clip: rect(0px, 1000px, 840px, 900px);
  transform-origin: 950px 0px;
  transition-delay: 900ms;  
}

＆＃13;

<figure id=blinds-window>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
</figure>

＆＃13;

＆＃13;

＆＃13;