让元素舞动！深度解密 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

相关推荐
OpenTiny社区5 分钟前
开源之夏报名倒计时3天！还有9个前端任务有余位，快来申请吧~
前端·github
ak啊10 分钟前
WebGL魔法：从立方体到逼真阴影的奇妙之旅
前端·webgl
hang_bro21 分钟前
使用js方法实现阻止按钮的默认点击事件&触发默认事件
前端·react.js·html
用户907387036486429 分钟前
pnpm是如何解决幻影依赖的?
前端
树上有只程序猿35 分钟前
Claude 4提升码农生产力的5种高级方式
前端
傻球36 分钟前
没想到干前端2年了还能用上高中物理运动学知识
前端·react.js·开源
咚咚咚ddd37 分钟前
前端组件：pc端通用新手引导组件最佳实践（React）
前端·react.js
Lazy_zheng37 分钟前
🚀 前端开发福音：用 json-server 快速搭建本地 Mock 数据服务
前端·javascript·vue.js
HJ_Coder37 分钟前
基于Proxyman的实时解密和预览方案
前端
Gixy38 分钟前
聊聊纯函数与不可变数据结构
前端·设计模式
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04基于STM32的智能电池管理系统05DeepSeek各版本说明与优缺点分析06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07Coze扣子平台完整体验和实践（附国内和国际版对比）08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10山东大学2024深度学习期末考试回忆