CSS3做輪播是網頁設計常用的效果之一，通過CSS3的動畫效果和樣式屬性，可以讓輪播圖更加生動。下面，我們來介紹一些CSS3做輪播的方法。

/* HTML結構 */
<div class="slider">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
/* CSS樣式 */
.slider {
position: relative;
width: 100%;
height: 500px;
}
.slider ul {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 500px;
list-style: none;
margin: 0;
padding: 0;
}
.slider li {
float: left;
width: 33.3333%;
height: 500px;
background-color: #ccc;
transition: transform .5s ease-in-out;
}
.slider li:nth-child(2) {
background-color: #999;
}
.slider li:last-child {
background-color: #666;
}
/* JS代碼 */
var slider = $('.slider');
setInterval(function(){
slider.find('ul').animate({
marginLeft: '-33.3333%'
}, 500, function(){
slider.find('li:first-child').appendTo(slider.find('ul'));
slider.find('ul').css('margin-left', '0%');
});
}, 3000);

通過上面的代碼，我們可以實現一個基本的輪播效果。其中，CSS樣式主要是對輪播圖的布局和樣式進行控制，JS代碼則是控制輪播圖的運動。通過修改CSS3的樣式屬性，還可以實現更多的輪播效果，如滑動、淡入淡出等等，可以根據需要進行定制化。