rotate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

rotate 属性允许你单独设置 transform 的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果,并且避免了简写形式需要记忆属性顺序的不方便之处。

语法

css
/* Keyword values */
scale: none;

/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/* 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;

角度值

An <angle> specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function.

x, y 或者 z 轴名称加上角度值

The name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotateX()/rotateY()/rotateZ() (3D rotation) function.

向量加上角度值

Three <number>s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. Equivalent to a rotate3d() (3D rotation) function.

none

指定不应用旋转

形式语法

rotate = 
none |
<angle> |
[ x | y | z | <number>{3} ] && <angle>

示例

HTML

html
<div>
  <p class="rotate">Rotation</p>
</div>

CSS

css
* {
  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;
}

结果

规范

Specification
CSS Transforms Module Level 2
# individual-transforms
初始值none
适用元素可变换元素
是否是继承属性
计算值as specified
动画类型a transform
Creates stacking context

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rotate
none
x, y, or z axis name plus angle value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support