我这里有一个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秒旋转一次吗?而不只是等待某人盘旋?
答案 0 :(得分:4)
使用无限animation而不是transition。
.card {
animation: rotate 2s infinite;
}
@keyframes rotate {
100% {
transform: rotateY(180deg);
}
}
只需添加供应商前缀即可获得其他浏览器支持。为简洁起见,这里省略了它们。