前端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.hqwc.cn/news/641490.html

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

相关文章

甘特图：如何制定一个有效的产品运营规划？

甘特图：如何制定一个有效的产品运营规划？

做好一个产品的运营规划是一个复杂且系统的过程&#xff0c;涉及多个方面和阶段。以下是一些关键步骤和考虑因素&#xff0c;帮助你制定一个有效的产品运营规划&#xff1a; 1、明确产品定位和目标用户&#xff1a; 确定产品的核心功能、特点和优势&#xff0c;明确产品在市…
阅读更多...
Android Studio实现内容丰富的安卓校园超市

Android Studio实现内容丰富的安卓校园超市

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动 项目代号168 1.开发环境 后端用springboot框架&#xff0c;安卓的用android studio开发 android stuido3.6 jdk1.8 idea mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册…
阅读更多...
jdbc操作数据库 and 一个商品管理页面

jdbc操作数据库 and 一个商品管理页面

文章目录 1. 介绍1.1 应用知识介绍1.2 项目介绍 2. 文件目录2.1 目录2.2 介绍以下&#xff08;从上到下&#xff09; 3. 相关代码3.1 DBConnection.java3.2 MysqlUtil.java3.3 AddServlet.java3.4 CommodityServlet.java3.5 DelectServlet.java3.6 SelectByIdServlet.java3.7 S…
阅读更多...
iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac是一款功能强大的系统监控工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户全面了解电脑的运行状态&#xff0c;提高电脑的性能和稳定性。 iStat Menus for Mac v6.73 (1239)中文版下载 该软件可以实时监测CPU使用率、内存占用、网络速度、硬盘活动…
阅读更多...
Python网络爬虫之数美滑块的加密及轨迹分析

Python网络爬虫之数美滑块的加密及轨迹分析

目录 一、引言 二、数美滑块验证概述 三、数美滑块加密机制分析 1、参数混淆与加密 2、JS代码动态执行 四、轨迹分析 1、轨迹数据获取 2、轨迹特征提取 五、动态JS参数分析 1、网络请求分析 2、JS代码调试与追踪 六、Python实现案例分析 1. 环境搭建与依赖安装 2…
阅读更多...
模块三——二分：34.在排序数组中查找元素的第一个和最后一个位置

模块三——二分：34.在排序数组中查找元素的第一个和最后一个位置

文章目录 前言题目描述算法原理细节问题 代码实现 前言 相信通过本模块的第一篇博客&#xff0c;大家已经能够对二分有一个清晰的认知了&#xff0c;最好画画图来加深理解&#xff0c;以下是一些新的注意事项&#xff1a; 请⼤家⼀定不要觉得背下模板就能解决所有⼆分问题。⼆…
阅读更多...
TaskWeaver使用记录

TaskWeaver使用记录

TaskWeaver使用记录 1. 基本介绍2. 总体结构与流程3. 概念细节3.1 Project3.2 Session3.3 Memory3.4 Conversation3.5 Round3.6 Post3.7 Attachment3.8 Plugin3.9 Executor 4. 代码特点5. 使用过程5.1 api调用5.2 本地模型使用5.3 添加插件 6. 存在的问题与使用体验6.1 判别模型…
阅读更多...
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明

【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 显示类控件 | Label的使用及说明 文章编号&#xff1a;Q…
阅读更多...
qt实现不定数量的按钮向前向后移动展示

qt实现不定数量的按钮向前向后移动展示

按钮模拟移动 引言示例代码第一种思路开发环境代码结构实现代码第二种思路开发环境实现代码第三种思路开发环境实现代码总结引言 此文主要记录用qt实现按钮的移动，具体效果如下： 模拟按钮移动效果 示例代码 本文记录了三种实现方式。 第一种 思路 用动态数组vector存放创…
阅读更多...
美国洛杉矶服务器的特点

美国洛杉矶服务器的特点

美国洛杉矶的服务器提供多种优质的托管服务&#xff0c;具有较好的网络连接速度和稳定性。以下是一些洛杉矶服务器的特点和服务&#xff0c;rak小编为您整理发布。 1. **地理位置优势**&#xff1a;位于美国西海岸的洛杉矶机房离中国相对较近&#xff0c;这有助于减少延迟&…
阅读更多...
深度剖析Gateway在微服务治理中的关键角色

深度剖析Gateway在微服务治理中的关键角色

目录 一、多层网关 二、Gateway 路由规则 2.1 路由 2.2 谓词 2.3 过滤器 三、路由声明规则 3.1 谓词 寻址谓词 请求参数谓词 时间谓词 自定义谓词 一、多层网关 首先我们先了解下一个请求是如何到达服务端并得到相应的。过程如图所示&#xff1a; 首先网址解析的第一步是 DN…
阅读更多...
QT客户端的开发框架

QT客户端的开发框架

针对QT客户端开发&#xff0c;目前存在多种框架&#xff0c;各有优缺点&#xff0c;具体选择哪种框架取决于您的具体需求和项目特点。以下是一些流行的QT客户端开发框架。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. Qt框架 Qt…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023