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

相关推荐
北海几经夏3 分钟前
React组件中的this指向问题
前端·react.js
passer98116 分钟前
列表项切换时同步到可视区域
前端
FogLetter18 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元19 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api19 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
子林super27 分钟前
y1新建cluster集群redis
前端
liangdabiao30 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端
Pedantic1 小时前
swift 日期与时间的三个结构体
前端
南方kenny1 小时前
Mock.js:前端开发的假数据神器
前端·javascript
芹丸子1 小时前
vue cli 创建项目一直失败
前端