html图片正反

图片正向显示

在HTML中，图片默认以正向（原始方向）显示，通过<img>标签的src属性指定图片路径，并配合alt属性提供替代文本。
示例代码：

<img src="image.jpg" alt="描述文字">

关键点：

• src：图片路径（URL）。
• alt：替代文本，用于无图片时显示或SEO优化。
• 默认情况下，图片按原始方向渲染。

图片反向显示

若需将图片水平或垂直翻转，可通过CSS的transform属性实现。
水平翻转（左右反转）：

img {  
  transform: scaleX(-1);  
}  

垂直翻转（上下反转）：

img {  
  transform: scaleY(-1);  
}  

关键点：

<style>
.flip-container {
perspective: 1000px; / 保持3D效果 /
}
.flip-container img {
transition: transform 0.5s;
}
.flip-container:hover img {
transform: rotateY(180deg); / 沿Y轴旋转180度 /
}
</style>
<div class="flip-container">
<img src="image.jpg" alt="描述文字">
</div>

关键点：

• perspective：为容器添加透视效果，使翻转更自然。
• transition：定义翻转动画的持续时间。
• rotateY(180deg)：沿Y轴旋转180度，实现正反切换。

常见问题与解答

问题1：如何让图片翻转后保留反向状态？
解答：需通过JavaScript修改样式或添加类名。

const img = document.querySelector('img');  
img.addEventListener('click', () => {  
  img.classList.toggle('flipped'); // 切换类名  
});  

CSS中定义.flipped类：

.flipped {
transform: rotateY(180deg);
}

问题2：翻转动画卡顿怎么办？
解答：

1. 优化图片大小，减少加载时间。
2. 使用will-change: transform;提示浏览器提前渲染：

   img {  
     will-change: transform;  
   }  

3. 确保动画时间短（如3s），避免复杂计算