如何每2秒旋转一次文本/图像？

Question

我这里有一个CSS代码，可以在悬停时旋转任何文字/图像 180％：

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}

我可以将其更改为每2秒旋转一次吗？而不只是等待某人盘旋？

Answer 1

使用无限animation而不是transition。

Example Here

.card {
    animation: rotate 2s infinite;
}

@keyframes rotate {
    100% {
        transform: rotateY(180deg);
    }
}

只需添加供应商前缀即可获得其他浏览器支持。为简洁起见，这里省略了它们。