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

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

相关推荐
打不着的大喇叭31 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code37 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟39 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github