CSS3是前端開發中一個非常重要的技術，它可以讓我們實現許多令人印象深刻的效果。

其中，拖動旋轉效果是一種非常有趣的功能。下面我們來看看如何使用CSS3來實現這個效果。

#box {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: #f00;
cursor: move;
transform: rotate(0deg);
transition: transform 0.5s;
}
#box:active {
transform-origin: center;
}
#box:active:hover {
transform: rotate(180deg);
}

我們通過CSS樣式來定義一個id為“box”的元素，并為其設置了寬、高、背景顏色，并讓其居中顯示。

我們還為這個元素設置了一個“cursor: move”的屬性，這樣就能讓用戶看到這個元素可以被拖動了。

在“transform”屬性中，我們將旋轉角度設置為0度，并設置其過渡效果為0.5秒。

在“:active”偽類中，我們為元素設置了“transform-origin: center”的屬性，這樣拖動時就能以中心點為旋轉中心。

當元素同時被按下和懸停時，我們就能夠通過“:active:hover”選擇器來實現元素的旋轉，將其旋轉角度設置為180度。

通過以上CSS樣式的設置，我們就實現了CSS3拖動旋轉效果。