initial commit

1 files changed, 89 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/image-orientation/index.html b/files/zh-cn/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..42de520c23
--- /dev/null
+++ b/files/zh-cn/web/css/image-orientation/index.html
@@ -0,0 +1,89 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+translation_of: Web/CSS/image-orientation
+---
+<div>{{CSSRef}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="概述">概述</h2>
+
+<p><code><a href="/en-US/docs/CSS" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', Lucida, Arial, Helvetica, sans-serif; line-height: inherit;">CSS</a><span style="font-family: lucida grande,lucida sans unicode,dejavu sans,lucida,arial,helvetica,sans-serif; line-height: inherit;"> 属性</span> image-orientation</code> 用来修正某些图片的<span style="line-height: inherit;">预设方向</span><span style="line-height: inherit;">.</span></p>
+
+<div class="note style-wrap">
+<p><strong>注意:</strong></p>
+
+<ul>
+ <li>该属性不是用来对图片进行任意角度旋转的, 它是用来修正那些带有不正确的预设方向的图片的. 因此该属性值会被四舍五入到 90 度的整数倍.</li>
+ <li>Similarly this property is not intented to handle the layout -&gt; portrait changing. As <code>image-orientation</code> affects only images, it won't work: the changes must happen at the layout-level</li>
+</ul>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">语法形式</a>: {{csssyntax("image-orientation")}}
+</pre>
+
+<pre>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
+</pre>
+
+<h3 id="属性值">属性值</h3>
+
+<dl>
+ <dt><code>from-image</code></dt>
+ <dd>根据图片的 EXIF 数据来旋转图片, EXIF 中有一个控制图片旋转度的属性.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>图片旋转值 {{cssxref("&lt;angle&gt;")}} , 会被自动四舍五入到 <code>90deg</code> (<code>0.25turn</code>) 的整数倍.</dd>
+ <dt><code>flip</code></dt>
+ <dd>对图片进行水平翻转, 先进行第二个参数执行的旋转, 再进行此次翻转.</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范名称</th>
+   <th scope="col">规范状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>增加了对 <code>from-image</code> 和 <code>flip</code> 关键字的支持.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.image-orientation")}}</p>
+</div>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>其它和图片相关的 CSS 属性: {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>