CSS3 是一種用于網頁設計的 CSS 版本，它提供了更多的樣式和動畫效果來美化網頁。其中一個重要的特性是能夠實現圖片旋轉和扭曲，讓你的網頁更加生動、有趣。

.rotate {
transform: rotate(45deg);
}
.skew {
transform: skewX(-30deg);
}

上面的代碼演示了如何使用 CSS3 來分別實現圖片旋轉和扭曲。其中，transform: rotate(45deg);把圖片旋轉了 45 度，transform: skewX(-30deg);把圖片沿 X 軸扭曲了 30 度。

你也可以同時對一張圖片進行多種變換，例如旋轉和扭曲同時進行:

.rotate-skew {
transform: rotate(45deg) skewX(-30deg);
}

這個類將同時對圖片進行旋轉和扭曲，實現了更加復雜的效果。

除了使用固定角度的變換，你還可以使用變量或表達式來實現動態效果。比如，下面的代碼演示了如何根據用戶的鼠標移動來實現圖片的旋轉效果：

.rotate-mouse {
transition: transform ease-out 0.5s;
}
.rotate-mouse:hover {
transform: rotate(var(--angle));
}
img:hover {
--angle: calc(10deg + 2 * (100vw - 600px) / 500);
}

這個代碼使用了 CSS 變量和計算表達式來實現根據屏幕寬度動態調整旋轉角度的效果，同時添加了鼠標懸停的過渡效果，讓圖片變換更加平滑自然。

總之，CSS3 提供了豐富的圖片變換效果，讓你的網頁更加生動、有趣，為用戶提供更好的瀏覽體驗。