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

相关推荐
一 乐6 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
C_心欲无痕7 小时前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫7 小时前
Claude Skills：Agent 能力扩展的新范式
前端·ai编程
yinuo7 小时前
前端跨页面通信终极指南：方案拆解、对比分析
前端
yinuo8 小时前
前端跨页面通讯终极指南⑨：IndexedDB 用法全解析
前端
xkxnq8 小时前
第二阶段：Vue 组件化开发（第 16天）
前端·javascript·vue.js
烛阴8 小时前
拒绝配置地狱！5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
xkxnq9 小时前
第一阶段：Vue 基础入门（第 15天）
前端·javascript·vue.js
anyup10 小时前
2026第一站：分享我在高德大赛现场学到的技术、产品与心得
前端·架构·harmonyos
BBBBBAAAAAi10 小时前
Claude Code安装记录
开发语言·前端·javascript
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03Linux下V2Ray安装配置指南04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05jdk21下载、安装（Windows、Linux、macOS）06KGG转MP3工具|非KGM文件|解密音频07Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定08【踩坑笔记】50系显卡适配的 PyTorch 安装092025-04-03 Latex学习1——本地配置Latex + VScode环境10UV安装并设置国内源