--- title: rotate slug: Web/CSS/rotate translation_of: Web/CSS/rotate --- <div>{{CSSRef}}{{seecompattable}}{{draft}}</div> <p><strong><code>rotate</code></strong>属性允许你单独设置<code><strong>transform</strong></code>的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果,并且避免了简写形式需要记忆属性顺序的不方便之处。</p> <h2 id="语法">语法</h2> <pre class="brush: css notranslate">/* Keyword values */ scale: none; /* Angle value */ rotate: 90deg; <span class="css">rotate: 0.25turn; rotate:</span> <span class="css">1.57rad</span>; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* Vector plus angle value */ rotate: 1 1 1 90deg;</pre> <h3 id="值">值</h3> <dl> <dt>角度值</dt> <dd>An {{cssxref("<angle>")}} specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a <code>rotate()</code> (2D rotation) function.</dd> <dt>x, y 或者 z 轴名称加上角度值</dt> <dd>The name of the axis you want to rotate the affected element around (<code>"x"</code>, "<code>y</code>", or "<code>z"</code>), plus an {{cssxref("<angle>")}} specifying the angle to rotate the element through. Equivalent to a <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code> (3D rotation) function.</dd> <dt>向量加上角度值</dt> <dd>Three {{cssxref("<number>")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{cssxref("<angle>")}} specifying the angle to rotate the element through. Equivalent to a <code>rotate3d()</code> (3D rotation) function.</dd> <dt id="none"><code>none</code></dt> <dd>指定不应用旋转</dd> </dl> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} <h2 id="示例">示例</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html notranslate"><div> <p class="rotate">Rotation</p> </div></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css notranslate">* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; }</pre> <h3 id="Result">Result</h3> <p>{{EmbedLiveSample('Examples')}}</p> <h2 id="Specifications">Specifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> <td>{{Spec2('CSS Transforms 2')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("css.properties.rotate")}}</p>