css中怎样设置多张图片变换

CSS中可以使用多种方式将多张图片变换，包括使用CSS3的transform属性、background属性、以及动画库等。

使用transform属性，可以非常简单地实现多张图片的变换效果，例如：

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

.img-container:hover {
  transform: rotate(180deg);
} 

上述代码实现了当鼠标悬浮在图片容器上时，图片会旋转180度的效果。同样，也可以使用scale、translate等属性实现图片的缩放、平移等效果。

通过background属性可以实现图片循环播放或者单张图片变换。

.div1{
    background:url(image1.jpg) repeat-x;
    animation: slide 5s linear infinite;
}

.div2{
    background:url(image1.jpg) no-repeat;
    animation: change 10s linear infinite;
}

@keyframes slide{
    0%{background-position:0 0;}
    100%{background-position:-900px 0;}
}

@keyframes change{
    0%{background:url(image1.jpg);}
    25%{background:url(image2.jpg);}
    50%{background:url(image3.jpg);}
    75%{background:url(image4.jpg);}
    100%{background:url(image1.jpg);}
} 

上述代码中，div1循环播放image1.jpg，并做成滑动的效果，而div2会按照25%的时间段展示不同的图片。

最后，还有许多第三方的动画库可以用于实现多张图片的变换效果，如Animate.css、Hover.css等。