原因是这个图片携带了exif信息，去掉这个信息就可以了，图片也就恢复正常显示了，在src的路径后面加上参数imageMogr2/auto-orient即可；例如：<img src="123.png?imageMogr2/auto-orient"/>
这个要用css3，ie要用滤镜，举例顺时针旋转90度-moz-transform:rotate(90deg)
-webkit-transform:rotate(90deg)
transform:rotate(90deg)
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
上面代码前三行是css3，第四行是ie滤镜的简单的90度的整数倍旋转方式，更加复杂的度数要用矩阵，需要的话可以查查资料
注：左旋把90改为-90，rotation=1改为rotation=3.
注：如果你的层上还有文字什么的，也会被旋转，所以有文字的话，和背景图放在不同的层上，旋转有背景图的层
css的旋转属性：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background:black
width: 150px
height: 150px
}
div:hover{
transform:rotate(45deg)
/*旋转45度*/
transition:1s
/*过渡时间1s*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
