CSS3旋轉特效是網頁設計中常用的一種特效。通過這種特效可以使頁面內容更加生動、有趣。下面我們將為大家分享一些CSS3旋轉特效的案例。

/*Case 1*/
.rotate {
width: 100px;
height: 100px;
background-color: #0f0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); 
}
/*Case 2*/
.flip {
width: 100px;
height: 100px;
background-color: #0f0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1); 
}
/*Case 3*/
.spin {
width: 100px;
height: 100px;
background-color: #0f0;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*Case 4*/
.slide {
width: 100px;
height: 100px;
background-color: #0f0;
-webkit-animation: slide 2s ease-in-out infinite alternate;
animation: slide 2s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(50px);
}
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(50px);
}
}

以上是四種不同的CSS3旋轉特效案例。第一種是使用transform屬性的rotate方法來旋轉元素；第二種是使用transform屬性的scaleX方法來翻轉元素；第三種是使用animation屬性來創建旋轉動畫；第四種是使用animation屬性來創建左右滑動的動畫。

總之，CSS3旋轉特效可以為網頁設計增添一份趣味性和亮點。通過多方面的實踐，我們可以不斷探索出更好的CSS3旋轉特效。