让元素舞动！深度解密 CSS 旋转函数

云浪2025-06-05 9:09

CSS 中的旋转函数（rotateX()、rotateY()、rotateZ() 、 rotate() 和 rotate3d()）用于对元素进行2D或3D空间中的旋转变换，从而改变元素的视觉方向和空间姿态。

rotateX()

绕 x 轴（水平轴）旋转一个元素。

rotateX() 的旋转量是由传入的角度值决定的。若角度为正值，元素将顺时针旋转；若为负值，则逆时针旋转。

在用户面向屏幕的情况下：

  1. 顺时针：向上翻转，元素上面部分远离用户方向，元素下面部分靠近用户方向

  2. 逆时针：向下翻转，元素上面部分靠近用户方向，元素下面部分远离用户方向

如下面的例子：

html 复制代码 
<div class="perspective-100">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(60deg)</p>
  </div>
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(-60deg)</p>
  </div>    
</div>
css 复制代码 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotateX:hover .fill {
  -webkit-transform: rotateX(60deg);
  transform: rotateX(60deg);
}
.card:nth-child(2) .rotateX:hover .fill{
  -webkit-transform: rotateX(-60deg);
  transform: rotateX(-60deg);      
}

更多可见 rotateX()

rotateY()

围绕Y轴（垂直轴）旋转元素。

由 rotateY() 产生的旋转量通过传入的角度值决定。如果为正值，运动方向为顺时针；如果为负值，则为逆时针。

css 复制代码 
rotateY(a)

在用户面向屏幕的情况下：

  1. 顺时针：元素右边远离用户方向，元素左边靠近用户方向

  2. 逆时针：元素右边靠近用户方向，元素左边远离用户方向

如下面的例子：

html 复制代码 
<div class="perspective-100">
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(-45deg)</p>
  </div>
</div>
css 复制代码 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.card:nth-child(2) .rotateY:hover .fill{
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);      
}

更多可见 rotateY()

rotateZ()

围绕 z 轴旋转元素。

rotateZ() 的旋转角度由传入的角度指决定：正值表示顺时针旋转，负值表示逆时针旋转。

css 复制代码 
rotateZ(a)

如下面的例子：

html 复制代码 
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(-45deg)</p>
</div>
css 复制代码 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotateZ:hover .fill {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.card:nth-child(2) .rotateZ:hover .fill{
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);      
}

更多可见 rotateZ()

rotate()

围绕 2D 平面的一个定点旋转一个元素。该定点也称为变换原点。由 transform-origin 属性指定。

rotate() 的旋转角度由传入的角度值决定：正值表示顺时针旋转，负值表示逆时针旋转。

css 复制代码 
rotate(a)

如下面的例子 ：

html 复制代码 
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)</p>
</div>
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(-45deg)</p>
</div>
css 复制代码 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  padding-top: 100px;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  transform-origin: 0 0; /* 绕左上角旋转 */
}
.card p {
  margin: 25px 0 0;
}
.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.card:nth-child(2) .rotate:hover .fill{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

更多可见 rotate()

rotate3d()

围绕 3D 平面的一个定轴旋转一个元素。

旋转的角度由传入的角度值决定。如果为正，为顺时针旋转；如果为负，则逆时针旋转。

scss 复制代码 
rotate3d(x, y, z, a)

  • x 为 0 到 1 之间的数值，表示旋转轴 x 坐标方向的矢量

  • y 为 0 到 1 之间的数值，表示旋转轴 y 坐标方向的矢量

  • z 为 0 到 1 之间的数值，表示旋转轴 z 坐标方向的矢量

  • a 角度值，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

如下面的例子：

html 复制代码 
<div class="perspective-100">
  <div class="card">
    <div class="box rotate3d">
      <div class="fill"></div>
    </div>
    <p>rotate3d(0,1,0,60deg)</p>
  </div>
  <div class="card">
    <div class="box rotate3d">
      <div class="fill"></div>
    </div>
    <p>rotate3d(0,1,0,-60deg)</p>
  </div>
</div>
css 复制代码 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotate3d:hover .fill {
  -webkit-transform: rotate3d(0, 1, 0, 60deg);
  transform: rotate3d(0, 1, 0, 60deg);
}
.card:nth-child(2) .rotate3d:hover .fill{
  -webkit-transform: rotate3d(0, 1, 0, -60deg);
  transform: rotate3d(0, 1, 0,-60deg);      
}

更多可见 rotate3d()

总结

CSS 旋转函数（rotateX()、rotateY()、rotateZ()、rotate()、rotate3d()）通过 transform 属性实现元素绕指定轴的 2D/3D 旋转控制。

参考

  1. Css3 Transform 各种变形旋转 | 菜鸟工具

  2. CSS value functions

相关推荐
来恩100313 分钟前
jQuery选择器
前端·javascript·jquery
前端繁华如梦15 分钟前
树上挂苹果还是挂玻璃球？Three.js 程序化果实的完整实现指南
前端·javascript
墨痕诉清风22 分钟前
Web浏览器客户端检测网站网络健康（代码）
前端·网络·测试工具
IMPYLH25 分钟前
Linux 的 wc 命令
linux·运维·服务器·前端·bash
happybasic41 分钟前
Python库升级标准流程~
linux·前端·python
川冰ICE1 小时前
前端工程化深度实战：从Webpack5到Vite5的构建工具演进与选型决策
前端
CDwenhuohuo1 小时前
优惠券组件直接用 uview plus
前端·javascript·vue.js
用户74090472362751 小时前
我用 curl 排查了一次 OpenAI-compatible API 连接失败：401、403、404 分别怎么定位
前端
kft13141 小时前
XSS深度剖析：从弹窗到持久化窃取Cookie
前端·web安全·xss·安全测试
烬羽1 小时前
《前端三权分立：HTML、CSS、JS为什么不能“乱搞”》
前端
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07【AI】2026 年具身智能模型和世界模型总结08几个好用的ip纯净度检测网站09codex app每次打开重连5次Reconnecting问题解决10用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比