css点击改变图片方向

CSS可以控制网页中的各种元素，包括图片。在某些情况下，我们希望通过点击图片来改变它的方向，这可以通过CSS实现。

首先，我们需要为图片创建一个CSS类，使用transform属性来控制图片的旋转。以下是一个例子：

.img-rotate {
  
 transition: all 0.5s ease-in-out;
}
.img-rotate.rotate-90 {
  
 transform: rotate(90deg);
}
.img-rotate.rotate-180 {
  
 transform: rotate(180deg);
}
.img-rotate.rotate-270 {
  
 transform: rotate(270deg);
}
 

在这个例子中，我们为图片创建了一个CSS类，名为“img-rotate”。我们还定义了四个不同的变体，用于旋转图片的不同角度。

接下来，在HTML中我们需要为图片添加一个onclick事件。以下是一个例子：

在这个例子中，我们为图片添加了一个onclick事件，调用名为“rotateImage()”的JavaScript函数。

最后，在JavaScript函数中，我们需要为图片添加所需的CSS类，以实现旋转的效果。以下是一个例子：

function rotateImage() {
  
 var img = document.querySelector(".img-rotate");
  
 if (img.classList.contains("rotate-270")) {
  
   
 img.classList.remove("rotate-270");
  
   
 img.classList.add("rotate-90");
  
}
 else if (img.classList.contains("rotate-90")) {
  
   
 img.classList.remove("rotate-90");
  
   
 img.classList.add("rotate-180");
  
}
 else if (img.classList.contains("rotate-180")) {
  
   
 img.classList.remove("rotate-180");
  
   
 img.classList.add("rotate-270");
  
}
 else {
  
   
 img.classList.add("rotate-270");
  
}
}
 

在这个例子中，我们为JavaScript函数添加了四个不同的分支，用于根据当前的图片方向来选择添加或删除相应的CSS类。这样，每次点击图片时，就会通过JavaScript动态改变图片的方向。