这里是CSS的新功能,我有一堆要旋转/旋转的图像。
.images_div{
position: absolute;
top: 1%;
left: -2%;
width: 250px;
height: 200px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 150s linear infinite;
-moz-animation:spin 150s linear infinite;
animation:spin 150s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
我使用上面的代码旋转包含图像的div。
问题很好,它使div旋转而不是其中的图像旋转,但是我希望图像不移动,并且每个图像都单独旋转。
我猜对每个图像使用上面的代码不是正确的方法吗?所以我应该怎么做?
谢谢
答案 0 :(得分:2)
在div内的img标签中添加以下样式
.images_div img {
width: 50px;
height: 50px;
margin: 20px;
-webkit-animation: spin 150s linear infinite;
-moz-animation: spin 150s linear infinite;
animation: spin 150s linear infinite;
}
.images_div img {
width: 50px;
height: 50px;
margin: 20px;
-webkit-animation: spin 150s linear infinite;
-moz-animation: spin 150s linear infinite;
animation: spin 150s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="images_div">
<img src="https://picsum.photos/50">
<img src="https://picsum.photos/50">
<img src="https://picsum.photos/50">
</div>