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

时间:2015-02-06 02:07:14

标签: css css3

我这里有一个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秒旋转一次吗?而不只是等待某人盘旋?

1 个答案:

答案 0 :(得分:4)

使用无限animation而不是transition

Example Here

.card {
    animation: rotate 2s infinite;
}

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

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