image-orientation

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

CSS 属性 image-orientation 用来修正某些图片的预设方向.

注意:

该属性不是用来对图片进行任意角度旋转的, 它是用来修正那些带有不正确的预设方向的图片的. 因此该属性值会被四舍五入到 90 度的整数倍.
Similarly this property is not intented to handle the layout -> portrait changing. As image-orientation affects only images, it won't work: the changes must happen at the layout-level

初始值	`0deg`
适用元素	all elements
是否是继承属性	yes
适用媒体	visual
计算值	an `angle`, rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn`
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

语法形式: from-image | <angle> | [<angle>? flip]

image-orientation: 0deg
image-orientation: 6.4deg     /* 非 90 度的整数倍, 所以会被四舍五入到 0 度 */
image-orientation: -90deg     /* 相当于 270deg */
image-orientation: from-image /* 使用图片的 EXIF 数据 */
image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */
image-orientation: flip       /* 不旋转, 只进行水平翻转 */

image-orientation: inherit

属性值

from-image: 根据图片的 EXIF 数据来旋转图片, EXIF 中有一个控制图片旋转度的属性.
<angle>: 图片旋转值 <angle> , 会被自动四舍五入到 90deg (0.25turn) 的整数倍.
flip: 对图片进行水平翻转, 先进行第二个参数执行的旋转, 再进行此次翻转.

示例

规范

规范名称	规范状态	备注
CSS Image Values and Replaced Content Module Level 4 image-orientation	Working Draft	增加了对 `from-image` 和 `flip` 关键字的支持.
CSS Image Values and Replaced Content Module Level 3 image-orientation	Candidate Recommendation

支持特性	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本支持	未实现	26 (26)	未实现	未实现	未实现
`from-image`	未实现	26 (26)	未实现	未实现	未实现
`flip`	未实现	26 (26)	未实现	未实现	未实现

支持特性	Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本支持	未实现	26.0 (26)	1.2 (26)	未实现	未实现	未实现
`from-image`	未实现	26.0 (26)	1.2 (26)	未实现	未实现	未实现
`flip`	未实现	26.0 (26)	1.2 (26)	未实现	未实现	未实现

image-orientation

概述

语法

属性值

示例

规范

浏览器兼容性

相关链接

文档标签和贡献者