CSS3是一個較新的網頁樣式技術，其中包含許多經典特效，例如旋轉效果。然而，在進行網頁設計時，經常需要旋轉一些元素，但是旋轉回來需要寫比較繁瑣的代碼。

下面是一個樣式代碼演示，來展示如何使用CSS3實現一個圖形樣式的旋轉后再旋轉回來的動畫：

.rotate {
width: 100px;
height: 100px;
background-color: #00bcd4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
-webkit-animation: rotate 2s linear forwards;
animation: rotate 2s linear forwards;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

代碼中定義了一個旋轉樣式，給元素加上.rotate類名即可。其中，-webkit-和animation屬性是用于支持不同的瀏覽器。關鍵幀動畫就是使用@keyframes或-webkit-keyframes定義的動畫，動畫過程中不同階段元素的變化狀態。最后，將樣式綁定在.rotate類中即可，使用forwards屬性可以讓元素動畫結束后停留在最后幀狀態。

經過上述處理，就可以讓元素按照預期的方式旋轉回來。這個樣式可以通過不同的參數進行調整，實現更多其他的旋轉效果。