1. Web
  2. CSS
  3. rotate

rotate

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本使用。自 2022 年 8 月起，所有浏览器均已支持此功能。

rotate CSS 属性允许您单独指定旋转变换，并且独立于 transform 属性。这更符合典型的用户界面使用方式，并且省去了记住在 transform 属性中指定变换函数的精确顺序的麻烦。

试一试

rotate: none;

rotate: -45deg;

rotate: z 45deg;

rotate: x 45deg;

rotate: y 45deg;

rotate: 3 0.5 2 45deg;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

语法

css
/* Keyword values */
rotate: 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;

/* Global values */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;

值

角度值

一个 <angle> 值，指定受影响元素围绕 Z 轴旋转的角度。等同于 rotate()（2D 旋转）函数。

x、y 或 z 轴名称加角度值

您希望受影响元素围绕旋转的轴的名称（x、y 或 z），加上一个 <angle> 值，指定元素旋转的角度。等同于 rotateX()/rotateY()/rotateZ()（3D 旋转）函数。

向量加角度值

三个 <number> 值，表示一个以原点为中心的向量，它定义了您希望元素围绕旋转的线，加上一个 <angle> 值，指定元素旋转的角度。等同于 rotate3d()（3D 旋转）函数。

none

指定不应用任何旋转。

正式定义

初始值none
应用于可变换元素
继承性否
计算值同指定值
动画类型变换
创建层叠上下文是

正式语法

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

示例

悬停时旋转元素

以下示例展示了如何使用 rotate 属性在悬停时沿各种轴旋转元素。第一个盒子在悬停时沿 Z 轴旋转 90 度，第二个盒子在悬停时沿 Y 轴旋转 180 度，第三个盒子在悬停时围绕由坐标定义的向量旋转 360 度。

HTML

html
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>

CSS

css
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

结果

规范

规范
CSS 变换模块级别 2
# individual-transforms

浏览器兼容性

另见

注意：skew 不是独立的 transform 值

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.