CSS3的點擊旋轉效果可謂是網頁設計中非常常見和實用的功能。

要實現點擊旋轉的效果，需要使用CSS3中的transform屬性，而transform屬性中的rotate()方法可以實現元素的旋轉。

// HTML代碼
<div class="box">
點擊旋轉
</div>
// CSS代碼
.box {
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
.box:hover {
transform: rotate(45deg);
}
.box:active {
transform: rotate(-45deg);
}

以上代碼實現了當鼠標移動到盒子上時，盒子會順時針旋轉45度的效果。當點擊盒子時，盒子會逆時針旋轉45度的效果。

除了指定具體的角度，還可以使用transform屬性中的rotateX()、rotateY()、rotateZ()方法實現繞x、y、z軸的旋轉效果。

.box:hover {
transform: rotateY(180deg);
}
.box:active {
transform: rotateZ(-45deg);
}

以上代碼實現了鼠標移動到盒子上時，盒子會繞Y軸旋轉180度的效果。當點擊盒子時，盒子會繞Z軸逆時針旋轉45度的效果。

除了以上的基礎旋轉效果外，還可以通過CSS3的transition屬性來實現平滑過渡的旋轉效果。

.box {
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
.box:active {
transform: rotate(-45deg);
}

以上代碼實現了當鼠標移動到盒子上時，盒子會平滑地以0.5秒的時間順時針旋轉45度的效果。當點擊盒子時，盒子會平滑地以0.5秒的時間逆時針旋轉45度的效果。