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

前端css中的transform的使用

  • 一、前言
  • 二、流程图
  • 三、举例
    • （一）、平移
      • 1.平移，源码1
      • 2.源码1运行效果
        • (1).视频效果
        • (2).截图效果
      • 3.平移3d效果，源码2
      • 4.源码2运行效果
        • （1）、视频效果
        • （2）、截图效果
    • （二）、旋转
      • 1.旋转，源码3
      • 2.源码3运行效果
        • （1）、视频效果
        • （2）、截图效果
      • 3.旋转3d效果，源码4
      • 4.源码4运行效果
        • （1）、视频效果
        • （2）、截图效果
    • （三）、缩放
      • 1.缩放，源码5
      • 2.源码5运行效果
        • （1）、视频效果
        • （2）、截图效果
      • 3.缩放3d效果，源码6
      • 4.源码6运行效果
        • （1）、视频效果
        • （2）、截图效果
    • （四）、倾斜
      • 1.倾斜，源码7
      • 2.源码7运行效果
        • （1）、视频效果
        • （2）、截图效果
    • （五）、综合变换
      • 1.综合变换，源码8
      • 2.源码8运行效果
        • （1）、视频效果
        • （2）、截图效果
  • 四、结语
  • 五、定位日期

一、前言

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/828118.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入了解计算机系统——利用循环展开对程序的优化

深入了解计算机系统——利用循环展开对程序的优化

系列文章&#xff1a; 操作系统详解(1)——操作系统的作用 操作系统详解(2)——异常处理(Exception) 操作系统详解(3)——进程、并发和并行 操作系统详解(4)——进程控制(fork, waitpid, sleep, execve) 操作系统详解(5)——信号(Signal) 文章目录 一些概念CPE 初步优化消除不必…
阅读更多...
python爬虫之爬取文本内容（2）

python爬虫之爬取文本内容（2）

一、基本案例 #注意&#xff1a;需要将requests包换成2.27.1 #中文编码gbk也可能是utf-8 import requests #from bs4 import BeautifulSoupif __name__ __main__:url https://www.biqg.cc/book/6909/1.html#目标访问网站url#伪装头信息的引入header {"User-Agent"…
阅读更多...
Golang | Leetcode Golang题解之第41题缺失的第一个正数

Golang | Leetcode Golang题解之第41题缺失的第一个正数

题目&#xff1a; 题解&#xff1a; func firstMissingPositive(nums []int) int {n : len(nums)for i : 0; i < n; i {for nums[i] > 0 && nums[i] < n && nums[nums[i]-1] ! nums[i] {nums[nums[i]-1], nums[i] nums[i], nums[nums[i]-1]}}for i …
阅读更多...
Redis入门到通关之Redis实现Session共享

Redis入门到通关之Redis实现Session共享

文章目录 ☃️前期概要☃️基于Session实现登录方案☃️现有方案存在的问题☃️Redis代替Session的业务流程❄️❄️设计key的结构❄️❄️设计key的具体细节❄️❄️整体访问流程 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博…
阅读更多...
Windows 10 安装配置WSL2（Ubuntu 20.04）教程

Windows 10 安装配置WSL2（Ubuntu 20.04）教程

Windows 10 安装配置WSL2&#xff08;Ubuntu 20.04&#xff09;教程 一、WSL简介 WSL&#xff08;Windows Subsystem for Linux&#xff09;是一个兼容层&#xff0c;允许在Windows 10上原生运行Linux二进制可执行文件。 二、安装WSL2 3.1 传统手动安装 更新系统&#xff…
阅读更多...
OFDM同步技术

OFDM同步技术

文章目录 前言一、OFDM 同步技术二、MATLAB 仿真1、STO 估计技术①、核心源码②、仿真结果 2、CFO 估计技术①、核心源码②、仿真结果 三、资源自取 前言 本文对 OFDM 同步技术以思维导图的形式呈现&#xff0c;有关仿真部分进行了讲解实现。 一、OFDM 同步技术 OFDM 同步技术…
阅读更多...
前端工程化02-复习jQuery当中的插件开发

前端工程化02-复习jQuery当中的插件开发

2、jQuery插件开发 在我们开发的时候、有时候jQuery提供的方法并不能满足我们的需求&#xff0c;如果我们想给jQuery扩展一些其他的方法&#xff0c;那这种情况下&#xff0c;可能会需要写一个插件 jQurey官网&#xff1a;jquery.com 例如一些、图片懒加载插件、滚动的插件、…
阅读更多...
阿里云效中的Story Point是什么，代表的是什么意思，该怎么填

阿里云效中的Story Point是什么，代表的是什么意思，该怎么填

文章目录 Story Point是什么一个合理的Point应该能让团队的其他成员相对准确的评估任务难度根据自己对任务难度的分析对比团队Point标准评估一个任务是多少Point点时建议三个人评估 这是我阅读并参考的文章 中文翻译Story Point 故事 点&#xff08;观点&#xff0c;论点&#…
阅读更多...
GDPU unity游戏开发 碰撞体与关节

GDPU unity游戏开发 碰撞体与关节

让你设计的角色跑起来吧&#xff0c;可以是动画&#xff0c;也可以是碰撞器的运动。 运动小车 找到小车素材&#xff0c;导入到层级面板。然后可以新建一个地面让小车在上面运动&#xff0c;新建一个方块当障碍物。 摆放好后&#xff0c;要加组件。记住&#xff0c;在unity中运…
阅读更多...
多商家AI智能名片商城系统（开源版）——构建高效数字化商业新生态

多商家AI智能名片商城系统（开源版）——构建高效数字化商业新生态

一、项目概述 1、项目背景 1&#xff09;起源 随着数字化时代的快速发展&#xff0c;传统名片和商城系统已经难以满足企业日益增长的需求。商家需要更高效、更智能的方式来展示自己的产品和服务&#xff0c;与消费者进行互动和交易。同时&#xff0c;开源技术的普及也为开发…
阅读更多...
HTML的学习-通过创建相册WEB学习HTML-第二部分

HTML的学习-通过创建相册WEB学习HTML-第二部分

文章目录 二、学习开始3.6、form元素示例&#xff1a;添加form元素示例&#xff1a;action属性添加到form属性中 3.7、input元素示例&#xff1a;在input属性中添加参数 3.8、button元素示例&#xff1a;在button中添加type元素示例&#xff1a;定义单选按钮radio 3.9、id属性示…
阅读更多...
easyExcel快速入门

easyExcel快速入门

目录 &#x1f9c2;1.简单介绍 &#x1f32d;2.快速入门 &#x1f953;1.导入依赖 &#x1f37f;2.导出到excel &#x1f38f;3.读入数据 &#x1f389;4.下载 1.简单介绍 传统操作Excel大多都是利用Apach POl进行操作的,但是POI框架并不完善,使用过程非常繁琐且有较多…
阅读更多...
盛水最多的容器 ---- 双指针

盛水最多的容器 ---- 双指针

题目链接 题目: 分析: 最大容积 即使就是最大面积, 长为下标之差, 宽为两下标对应值的最小值解法一: 暴力枚举: 将每两个数之间的面积都求出来, 找最大值, 时间复杂度较高解法二: 假设我们的数组是[6, 2, 5, 4], 我们先假设最左边和最右边, 即6 和 4 之间是最大面积长a*宽b此…
阅读更多...
nginx配置ip_hash负载均衡策略

nginx配置ip_hash负载均衡策略

一、nginx配置ip_hash负载均衡策略 nginx默认的负载均衡策略为轮询&#xff0c;某些场景需要使用ip_hash负载策略&#xff0c;即&#xff1a;同一个ip地址&#xff0c;永远访问nginx后面同一台tomcat。配置示例如下&#xff0c;主要是设置ip_hash&#xff1a; upstream www.ab…
阅读更多...
Pandas数据分析小技巧

Pandas数据分析小技巧

Pandas数据分析小技巧&#xff1a;提升数据处理效率与准确性的秘诀 Pandas是一个强大的Python数据分析库&#xff0c;它提供了快速、灵活且富有表现力的数据结构&#xff0c;使得数据清洗、转换、分析等操作变得简单而高效。本文将介绍一些Pandas数据分析的小技巧&#xff0c;…
阅读更多...
三招教你成为朋友圈运营高手，赶紧get起来！

三招教你成为朋友圈运营高手，赶紧get起来！

朋友圈作为一个重要的营销推广渠道&#xff0c;是能够为我们带来很多收益的。今天就给大家分享朋友圈运营的三个技巧&#xff0c;快快Get起来吧&#xff01; 第一招&#xff1a;明确人设定位 要在朋友圈里脱颖而出&#xff0c;首先我们需要明确自己的人设定位。选择一个与自己…
阅读更多...
【Spring】IOC/DI中常用的注解@Order与@DependsOn

【Spring】IOC/DI中常用的注解@Order与@DependsOn

目录 1、Order 注解改变Bean自动注入的顺序 1.1、了解SpringBootTest注解 1.2、Order 注解改变Bean自动注入的顺序 2、DependsOn 改变Bean的创建顺序 1、Order 注解改变Bean自动注入的顺序 在sping中&#xff0c;通过IOC&#xff08;控制反转&#xff09;和DI&#xff08;依…
阅读更多...
文本向量化模型新突破——acge_text_embedding勇夺C-MTEB榜首

文本向量化模型新突破——acge_text_embedding勇夺C-MTEB榜首

在人工智能的浪潮中&#xff0c;以GPT4、Claude3、Llama 3等大型语言模型&#xff08;LLM&#xff09;无疑是最引人注目的潮头。这些模型通过在海量数据上的预训练&#xff0c;学习到了丰富的语言知识和模式&#xff0c;展现了出惊人的能力。在支撑这些大型语言模型应用落地方面…
阅读更多...
文件操作（1）

文件操作（1）

为什么使⽤⽂件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化的…
阅读更多...
各平台奇怪问题备忘录

各平台奇怪问题备忘录

微信小程序 小程序报错Page 页面路径 has not been register yet 描述&#xff1a;uniapp做微信小程序开发时&#xff0c;新增某页面后&#xff0c;小程序跳转该页面报错Page 页面路径 has not been register yet 已知&#xff1a;page.json已添加该页面&#xff0c;小程序a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023