CSS點擊改變圖片方向

CSS在網頁設計中扮演著重要的角色，可以改變頁面布局、字體樣式、顏色等等。今天我們要討論的是如何使用CSS來實現在點擊圖片時改變圖片方向的效果。

首先在HTML中插入一張圖片，代碼如下：

<img src="圖像文件地址" alt="圖片描述">

然后在CSS中設置該圖片的樣式，包括大小、邊框和初始方向。例如：

img {
width: 100px;
height: 100px;
border: 1px solid #000;
transform: rotate(0deg);
}

在這里我們給圖片設置了邊框，大小為100x100px，并將圖片的方向設為0度，即默認的方向。

接下來，我們需要使用JavaScript來實現點擊圖片后改變其方向的效果。代碼如下：

document.querySelector('img').onclick = function() {
this.style.transform = 'rotate(180deg)';
}

這段代碼中，我們使用querySelector方法找到了第一個img標簽，然后給它綁定了一個click事件，當點擊圖片時執行回調函數。在回調函數中，我們使用了style屬性和transform屬性來改變圖片的方向，將方向設置為180度。

通過上述代碼，就可以實現在點擊圖片時改變其方向的效果了。你可以根據需要自行調整代碼中的數值，從而實現更加炫酷的效果。