css图片旋转180度代码

你可以使用CSS的`transform`属性来实现图片旋转180度。以下是一个示例代码：

.rotate180 {
  transform: rotate(180deg);
}

你可以将这个类名应用到你想要进行旋转的图片元素上，例如：

<img src="your-image.jpg" class="rotate180" alt="Rotated Image">

这样就可以将图片旋转180度了。记得替换`your-image.jpg`为你自己的图片路径。

相关问题

css 图片旋转180°

要实现CSS图片旋转180度，可以使用以下代码片段：

.box img:nth-of-type(1){
   transform: rotateX(0deg); /*第一张照片旋转0度*/
}
.box img:nth-of-type(2){
   transform: rotateX(-180deg); /*第二种照片旋转-180度，不显示*/
}

这段代码中，`.box img:nth-of-type(1)`表示选择`.box`元素中的第一个`img`子元素，然后通过`transform`属性的`rotateX`函数将其旋转0度。`.box img:nth-of-type(2)`表示选择`.box`元素中的第二个`img`子元素，通过`transform`属性的`rotateX`函数将其旋转-180度，从而使其不显示。当鼠标悬停在`.box`元素上时，`.box:hover img:nth-of-type(1)`的样式将生效，使第一张图片旋转180度，而`.box:hover img:nth-of-type(2)`的样式生效，使第二张图片旋转0度，从而显示出来。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [css3-------变换/过渡/动画](https://blog.csdn.net/m0_59642141/article/details/125634309)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [CSS3只让背景图片旋转180度](https://blog.csdn.net/qq_43958325/article/details/113633106)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

css3点击图片旋转180

你可以使用CSS3的transform属性来实现点击图片旋转180度的效果。具体的做法是，在图片的CSS样式中设置一个初始的旋转角度为0度，然后在点击事件中通过添加一个新的样式类来改变旋转角度为180度。

HTML代码：

<img src="your-image-path" class="rotate">

CSS代码：

.rotate {
  transition: transform 0.5s ease;
  transform: rotate(0deg);
}

.rotate180 {
  transform: rotate(180deg);
}

JavaScript代码：

const img = document.querySelector(".rotate");
img.addEventListener("click", () => {
  img.classList.toggle("rotate180");
});

这样当你点击图片时，它会旋转180度，再次点击则会回到初始状态。