前端css中的transform(转换)的使用

  • 开发
  • 54

前端css中的transform的使用

一、前言

css中transform的属性虽然有多个，其实弄懂了平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），后面的那些关于3d效果以及综合变换（如：平移+旋转+缩放等，自由组配）的属性就是这些前面4种效果的延伸和拓展。
在3d的效果下transform-style: preserve-3d; /* 保留 3D 效果 */通常要添加，不然程序有些时候达不到预期的3d视图效果，只显示2d状态效果。通常设置于元素的父集中。
此外，倾斜通常用于2d状态的变换，对于类似倾斜的3d的效果通常由rotate实现。
本文为了让效果更明显，结合“:hover”鼠标悬停效果来举例。

二、流程图
平面2d效果
3d效果
3d效果
3d效果
3d效果
平面2d效果
3d效果
3d效果
3d效果
3d效果
平面2d效果
3d效果
3d效果
3d效果
3d效果
transform（转换）
平移translate
旋转rotate
缩放scale
倾斜skew
综合变换
translate(x,y)
在X和Y轴上移动元素
translate(x,y,z)
在X、Y、Z轴上移动元素
translateX(x)
在X轴上移动元素
translateY(y)
在Y轴上移动元素
translateZ(z)
在Z轴上移动元素
rotate(angle角度)
旋转指定角度
rotate3d(x,y,z,角度)
在3D空间中绕指定轴旋转
rotateX(角度)
绕X轴旋转
rotateY(角度)
绕Y轴旋转
rotateZ(角度)
绕Z轴旋转
scale(x,y)
缩放X轴和Y轴
scale3d(x,y,z)
在 X、Y、Z 轴上缩放
scaleX(x)
在 X 轴上缩放
scaleY(y)
在 X 轴上缩放
scaleZ(z)
在 X 轴上缩放
skew(x角度,y角度)
在X和Y轴上倾斜
skewX(角度)
在X轴上倾斜
skewY(角度)
在Y轴上倾斜
前面几种功能属性的混合,如旋转+缩放，通过空格分隔

三、举例

（一）、平移

关键词句：transform: translate(-100px, 80px); /* 悬停时图片平移
x轴正数向右，y轴正数向下，z轴正数指向屏幕面前的我们。大致下面的效果：
请添加图片描述
在3d效果下，perspective: 1000px; /* 添加透视效果 */表示的是观众面向组件的距离，这个距离是1000px。此时如果z轴的参数为500px，就相对于组件往我们的方向移动了500px。通过我们平时对物体的观察，物体靠近了它就看起来变大了。反过来也一样，当是-500px说明物理远离我们500px，则看起来就会变小。也因此，3d的平移效果也可以用2d平移+缩放达到类似效果。

1.平移，源码1

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 指定文档的语言为英文 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码为 UTF-8 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度为视窗高度 */
      width: 90vw;  /* 宽度为视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便内容对齐 */
      justify-content: center;  /* 水平居中 */
      align-items: center;  /* 垂直居中 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 背景图像 */
      border-radius: 5px;  /* 圆角边框 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: translate(-100px, 80px);  /* 悬停时图片平移 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，可以悬停触发平移 -->
  </div>
</body>
</html>

2.源码1运行效果

(1).视频效果

transform平移效果

(2).截图效果

  • 鼠标未悬停在组件上时，效果截图如下：
    在这里插入图片描述

  • 鼠标悬停在组件上时，组件往左下角移动，效果截图如下：
    在这里插入图片描述

3.平移3d效果，源码2

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 指定 HTML 文档的语言为英文 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码为 UTF-8 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度等于视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便内容对齐 */
      justify-content: center;  /* 水平居中对齐 */
      align-items: center;  /* 垂直居中对齐 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
      perspective: 1000px;  /* 添加透视效果 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 设置背景图像 */
      border-radius: 5px;  /* 圆角边框，方块的边缘有圆角 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
      transform-style: preserve-3d;  /* 保留 3D 效果 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: translate3d(50px, 20px, 500px);  /* 悬停时沿 X 轴平移 50px，Y 轴平移 20px，Z 轴平移 500px */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，在悬停时进行 3D 平移 -->
  </div>
</body>
</html>

4.源码2运行效果

（1）、视频效果

transform平移效果3d

（2）、截图效果
  • 鼠标未悬停时，效果截图如下：
    在这里插入图片描述
  • 鼠标悬停时，效果截图如下：
    在这里插入图片描述

（二）、旋转

关键词句：transform: rotate(-180deg); /* 悬停时旋转 180 度 */
括号里添加角度，正角度为顺时针，负角度为逆时针。

1.旋转，源码3

<!DOCTYPE html>  <!-- 声明文档类型 -->
<html lang="en">  <!-- 定义 HTML 文档的语言 -->
<head>
  <meta charset="UTF-8">  <!-- 设置字符编码 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度为视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便对齐和分布 */
      justify-content: center;  /* 内容水平居中 */
      align-items: center;  /* 内容垂直居中 */
      background-color: greenyellow;  /* 容器背景颜色 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url(./小蜗牛.jpg);  /* 背景图像 */
      border-radius: 5px;  /* 圆角边框 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画 */
      transform: rotate(0deg);  /* 初始状态下不旋转 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: rotate(-180deg);  /* 悬停时旋转 180 度 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 定义容器，包裹其他内容 -->
    <div class="box"></div>  <!-- 定义方块 -->
  </div>
</body>
</html>

2.源码3运行效果

（1）、视频效果

transform旋转效果

（2）、截图效果

  • 鼠标未悬停在组件上时，效果截图如下：
    在这里插入图片描述

  • 鼠标悬停在组件上时，效果截图如下：
    在这里插入图片描述

3.旋转3d效果，源码4

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 定义 HTML 文档的语言 -->
<head>
  <meta charset="UTF-8">  <!-- 设置字符编码 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度为视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便对齐和分布 */
      justify-content: center;  /* 内容水平居中 */
      align-items: center;  /* 内容垂直居中 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
      perspective: 1000px;  /* 为 3D 效果提供深度感 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 背景图像 */
      border-radius: 5px;  /* 圆角边框 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
      transform-style: preserve-3d;  /* 保留 3D 效果 */
    }

    /* 悬停时的 3D 旋转效果 */
    .box:hover {
      transform: rotate3d(1, 1, 0, 180deg);  /* 悬停时沿 (1, 1, 0) 轴旋转 90 度 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，悬停时进行 3D 旋转 -->
  </div>
</body>

4.源码4运行效果

（1）、视频效果

transform旋转效果3d

（2）、截图效果
  • 鼠标未悬停在组件上时，效果截图如下：
    在这里插入图片描述
  • 鼠标悬停在组件上时，效果截图如下：
    在这里插入图片描述

（三）、缩放

关键词句： transform: scale(2, 3); /* 悬停时将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */
2d平面情况下，x,y的系数大于1则图形变大，小于1则图形变小。如果括号里只填一个参数，那么长和宽同比例变大或变小。

1.缩放，源码5

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 指定 HTML 文档的语言为英文 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码为 UTF-8 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度等于视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便内容对齐 */
      justify-content: center;  /* 水平居中对齐 */
      align-items: center;  /* 垂直居中对齐 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 设置背景图像 */
      border-radius: 5px;  /* 圆角边框，使方块的边缘有圆角 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 为动画过渡添加平滑效果 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: scale(2, 3);  /* 悬停时将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，在悬停时缩放 -->
  </div>
</body>
</html>

2.源码5运行效果

（1）、视频效果

transform缩放效果

（2）、截图效果

  • 鼠标未悬停于组件上时，效果截图如下：
    在这里插入图片描述

  • 鼠标悬停于组件上时，效果截图如下：
    在这里插入图片描述

3.缩放3d效果，源码6

因为z轴是指向观众的，在缩放的条件下，z方向它变大和变小我们都不容易观察效果。所以3d的缩放效果我们配合3d旋转效果rotate3d展示。源码6是z轴变为原来的7倍scale3d(2, 1.4, 7)效果。运行效果我们先截图z轴不变scale3d(2, 1.4, 1)，只旋转的效果，最后再截图7倍的效果。通过下面的效果，可以看出在旋转角度相同的情况下观测，z轴方向的内容缩放因为变大了，当组件旋转向我们时，我们看到的也变大变长。

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 定义 HTML 文档的语言 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度等于视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便对齐和分布 */
      justify-content: center;  /* 水平居中 */
      align-items: center;  /* 垂直居中 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
      perspective: 1000px;  /* 为 3D 效果提供深度感 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 背景图像 */
      border-radius: 5px;  /* 圆角边框 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
      transform-style: preserve-3d;  /* 保留 3D 效果 */
    }

    /* 悬停时的 3D 缩放与旋转效果 */
    .box:hover {
      transform: scale3d(2, 1.4, 7) rotate3d(1, 1, 0, 45deg);  /* 悬停时在 X 轴上缩放 2 倍，Y 轴上缩放 1.4 倍，Z 轴上缩放 7 倍，绕 (1, 1, 0) 轴旋转 45 度 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，提供透视效果和深度感 -->
    <div class="box"></div>  <!-- 方块，悬停时进行 3D 缩放与旋转 -->
  </div>
</body>
</html>

4.源码6运行效果

（1）、视频效果

transform缩放效果3d

（2）、截图效果
  • 鼠标未悬停时，效果截图：
    在这里插入图片描述
  • 鼠标悬停时，且z轴缩放不变，即scale3d(2, 1.4, 1)时，效果截图如下：
    在这里插入图片描述
  • 鼠标悬停时，且z轴缩放不变，即scale3d(2, 1.4, 7)时，效果截图如下：
    在这里插入图片描述

（四）、倾斜

关键词句： transform: skew(30deg, -15deg); /* 悬停时在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */

  • 若括号里只有一个参数，显示的是x轴的倾斜效果。
  • 对于 skewX，正数表示向左倾斜，负数表示向右倾斜。
  • 对于 skewY，正数表示向下倾斜，负数表示向上倾斜。

倾斜的效果主要用于二维的情况下。它的一下换和选择非常相似，比如在transform: skew(15deg, -15deg);时，看它也是一个旋转效果。

1.倾斜，源码7

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 指定 HTML 文档的语言为英文 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码为 UTF-8 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度等于视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便内容对齐 */
      justify-content: center;  /* 水平居中对齐 */
      align-items: center;  /* 垂直居中对齐 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 设置背景图像 */
      border-radius: 5px;  /* 圆角边框，方块的边缘有圆角 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: skew(30deg, -15deg);  /* 悬停时在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，悬停时倾斜 -->
  </div>
</body>
</html>

2.源码7运行效果

（1）、视频效果

transform倾斜效果

（2）、截图效果
  • 鼠标未悬停时，效果截图如下：
    在这里插入图片描述
  • 鼠标悬停时，效果截图如下：
    在这里插入图片描述

（五）、综合变换

我们还可以结合不同的属性进行变换，如：旋转+平移+缩放。在transform下添加属性，用空格隔开即可。这里我们只是简单的选了几个功能合并，优秀的读者可以自行搭配自己的想法添加不同的功能进行演示。
关键词句： transform: translateX(100px) rotateY(180deg) scale(1.5, 2); /* 悬停时在 X 轴上平移 100px，绕 Y 轴旋转 180 度，X 轴上缩放 1.5 倍，Y 轴上缩放 2 倍 */

1.综合变换，源码8

<!DOCTYPE html>  <!-- 声明文档类型，表明这是一个 HTML5 文档 -->
<html lang="en">  <!-- 指定 HTML 文档的语言为英文 -->
<head>
  <meta charset="UTF-8">  <!-- 设置文档的字符编码为 UTF-8 -->
  <style>
    /* 定义容器的样式 */
    .container {
      height: 100vh;  /* 高度等于视窗高度 */
      width: 90vw;  /* 宽度等于视窗宽度的 90% */
      display: flex;  /* 弹性布局，方便对齐 */
      justify-content: center;  /* 水平居中对齐 */
      align-items: center;  /* 垂直居中对齐 */
      background-color: greenyellow;  /* 设置容器的背景颜色 */
    }

    /* 定义方块的样式 */
    .box {
      width: 200px;  /* 固定宽度 */
      height: 150px;  /* 固定高度 */
      background-image: url('./小蜗牛.jpg');  /* 设置背景图像 */
      border-radius: 5px;  /* 圆角边框，方块的边缘有圆角 */
      background-size: cover;  /* 背景图像覆盖整个方块 */
      transition: transform 0.5s ease-in-out;  /* 平滑动画过渡 */
    }

    /* 悬停时的效果 */
    .box:hover {
      transform: translateX(100px) rotateY(180deg) scale(1.5, 2);  /* 悬停时在 X 轴上平移 100px，绕 Y 轴旋转 180 度，X 轴上缩放 1.5 倍，Y 轴上缩放 2 倍 */
    }
  </style>
</head>
<body>
  <div class="container">  <!-- 容器，包含其他内容 -->
    <div class="box"></div>  <!-- 方块，悬停时进行平移、旋转和缩放 -->
  </div>
</body>
</html>

2.源码8运行效果

（1）、视频效果

综合效果

（2）、截图效果
  • 鼠标未悬停在组件上时，效果截图如下：
    在这里插入图片描述

鼠标悬停在组件上时，效果截图如下：
在这里插入图片描述

四、结语

关于transform变换，也是前面学习中遇到过的。虽然它的内容有些多，但殊途同源，会了平移、旋转、缩放，便可以理类推，推出相关的3d用法、混合用法。至于倾斜，以字体倾斜来类推，且属性不多也好记。
这transform今天选择学习它，是因这两天摸索水波ripple功能时多次碰到，加上前面学习的多多少少也碰到过几次，为了学习提升，故此写文。

五、定位日期

2024.4.22
19:18

阅读全部

相关推荐

  9. 前端小白一文掌握 CSS3 2D转换transform

    2024-04-22 21:22:04       10 阅读

  10. transformer中的ffn

    2024-04-22 21:22:04       8 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-04-22 21:22:04       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-04-22 21:22:04       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-04-22 21:22:04       19 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-04-22 21:22:04       20 阅读

热门阅读

  2. Kubernetes Kafka 系列｜MirrorMaker 2 同步数据

    2024-04-22 21:22:04       16 阅读

  6. android 内存优化

    2024-04-22 21:22:04       13 阅读

  8. oracle控制文件的管理

    2024-04-22 21:22:04       16 阅读

  9. el-table 表格从下往上滚动，触底自动请求新数据

    2024-04-22 21:22:04       17 阅读

  10. 深度解析：企业微信流量池如何助力企业营销升级

    2024-04-22 21:22:04       17 阅读

  11. jQuery高级使用

    2024-04-22 21:22:04       24 阅读

  21. 多线程批量导入mysql

    2024-04-22 21:22:04       13 阅读

  22. vue2 mixins混入

    2024-04-22 21:22:04       17 阅读

  24. HashTable和ConcurrentHashMap的区别

    2024-04-22 21:22:04       19 阅读

  25. 前端错误监控的方法有哪些

    2024-04-22 21:22:04       16 阅读

  28. numpy

    2024-04-22 21:22:04       15 阅读

  29. C# 接口

    2024-04-22 21:22:04       57 阅读