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.