当前位置： 首页 > news >正文

CSS平面转换-平移

news 文章来源：https://blog.csdn.net/m0_73701759/article/details/140858885 2025/1/17 1:06:42

平面转换-平移

属性 transform: translate(X轴移动距离, Y轴移动距离);

取值

  • 像素单位取值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可
    技巧
  • translate()只写一个值表示只沿着X轴移动
  • 单独设置X或Y轴距离：translateX()或translateY()

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平面转换-平移</title><style>.father {width: 500px;height: 300px;margin: 100px  auto;border: 1px solid #000000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}.father:hover .son {transform: translate(100px, 200px);/* 百分比参照盒子自身尺寸 *//* transform: translate(50%,100%); *//* transform: translate(-50%,100%); *//* transform: translateX(100px); */transform: translateY(200px);}</style>
</head>
<body><div class="father"><div class="son"></div></div></body>
</html>

相关文章：

CSS平面转换-平移

平面转换-平移 属性 transform: translate(X轴移动距离, Y轴移动距离); 取值 像素单位取值百分比&#xff08;参照盒子自身尺寸计算结果&#xff09;正负均可 技巧translate()只写一个值表示只沿着X轴移动单独设置X或Y轴距离&#xff1a;translateX()或translateY() 代码 …...

编程日记 2024/8/2 1:32:20

Linux-3：Shell编程——基础语法（0-50%）

目录 前言 一、变量 1.定义变量 2.使用变量 3.修改变量 4.将命令的结果赋值给变量 5.只读变量 6.删除变量 二、传递参数 三、字符串 1.字符串举例 2.统计字符串长度 3.字符串拼接 4.截取字符串 总结 前言 Shell是一种程序设计语言。作为命令语言&#xff0c;它…...

编程日记 2024/8/2 1:31:19

C++ --＞ string类模拟实现（附源码）

欢迎来到我的Blog&#xff0c;点击关注哦&#x1f495; 前言&#xff1a; C中STL扮演着极其重要的角色&#xff0c;学习C重中之重的就是学习STL&#xff0c;虽然string不作为containers的其中一员&#xff0c;但是也是值得学习的le类。下面就进行string的模拟实现 string的模拟…...

编程日记 2024/8/2 1:30:18

基于PHP+MySQL组合开发的微信活动投票小程序源码系统 带完整的安装代码包以及搭建部署教程

系统概述 在当今数字化时代&#xff0c;微信作为社交媒体的巨头&#xff0c;为企业和个人提供了丰富的互动营销平台。其中&#xff0c;投票活动作为一种有效的用户参与和互动方式&#xff0c;被广泛应用于各种场景。为了满足这一需求&#xff0c;我们推出了一款基于PHPMySQL组…...

编程日记 2024/8/2 1:29:17

利用Arcgis设置分式标注（分子分母标注）

因工作需要&#xff0c;需要设置分式标注&#xff0c;下面详细介绍下如何利用arcgis 设置分式标注&#xff0c;以下操作以供参考&#xff0c;如有疑义可提出。 一、准备工作 软件&#xff1a;arcmap 示例数据&#xff1a;行政区shp矢量图 二、操作步骤 1.添加数据 将行政区sh…...

编程日记 2024/8/2 1:28:16

大麦网抢票攻略：使用Python Selenium实现

随着互联网技术的发展&#xff0c;在线购票已成为人们获取演出、比赛等活动门票的主要方式。然而&#xff0c;面对热门活动&#xff0c;门票往往在开售瞬间被抢购一空。为了解决这一问题&#xff0c;本文将介绍如何利用Python和Selenium技术实现大麦网的自动抢票。 1. 环境准备…...

编程日记 2024/8/2 1:27:15

Navicat 在整个数据库中查找字符

Navicat 在整个数据库中查找字符 1.首先打开Navicat,连接目标数据库。2.选择工具选项卡&#xff0c;选择在数据库或模式中查找。3.查找前填入关键字信息&#xff0c;点击查找4.双击查找到数据&#xff0c;进行查看 说明&#xff1a;当我们知道数据库有数据的关键字&#xff0c;…...

编程日记 2024/8/2 1:26:15

Python基础—处理时间问题

一文帮助您解决99%时间处理问题...

编程日记 2024/8/2 1:25:13

如何选择合适的自动化测试工具！

选择合适的自动化测试工具是一个涉及多方面因素的决策过程。以下是一些关键步骤和考虑因素&#xff0c;帮助您做出明智的选择&#xff1a; 一、明确测试需求和目标 测试范围&#xff1a;确定需要自动化的测试类型&#xff08;如单元测试、集成测试、UI测试等&#xff09;和测试…...

编程日记 2024/8/2 1:24:12

数字图像边缘曲率计算及特殊点检测

一、曲率和数字图像边缘曲率检测常用方法简介 边缘曲率作为图像边缘特征的重要参数&#xff0c;不仅反映了边缘的几何形状信息&#xff0c;还对于图像识别、图像分割、目标跟踪等任务具有显著影响。 曲线的曲率&#xff08;curvature&#xff09;就是针对曲线上某个点的切线方向…...

编程日记 2024/8/2 1:23:11

python map

在 Python 中&#xff0c;如果你指的是字典&#xff08;dictionary&#xff09;&#xff0c;可以使用字典的 .items() 方法来遍历键值对。Python 中没有严格意义上的 Map 类型&#xff0c;而是使用字典来实现类似于键值对映射的功能。 遍历字典的键值对 可以使用 for 循环和 …...

编程日记 2024/8/2 1:21:08

每日一练 - NFV部署应用环境

01 真题题目 NFV 常常部署在下列哪些应用环境中?(多选) A.数据中心 B.网络节点 C.用户接入侧 D.客户机/服务器 02 真题答案 ABC 03 答案解析 NFV&#xff08;Network Functions Virtualization&#xff0c;网络功能虚拟化&#xff09;是一种技术&#xff0c;它允许在标准的…...

编程日记 2024/8/2 1:20:07

031-GeoGebra中级篇-GeoGebra的布尔值

在 GeoGebra 中&#xff0c;布尔值和条件判断是实现动态数学模型和交互式几何图形的重要工具。布尔值&#xff0c;即逻辑值&#xff0c;只有两个可能的取值&#xff1a;真&#xff08;True&#xff09;或假&#xff08;False&#xff09;。通过使用布尔值&#xff0c;我们可以创…...

编程日记 2024/8/2 1:19:05

基于Debian用户安装星火商店

星火商店下载地址&#xff1a;https://www.spark-app.store/ 本文章我以kali linux来做示范 注:基本debian的linux包括ubuntu,mint linux,kali linux,Pop!_OS,deepin等等 1.点击下载最新版本 2.点击下载 3.点击开始下载&#xff08;它会自动跳转网页&#xff09; 4.选择要下载…...

编程日记 2024/8/2 1:18:05

《计算机网络》（第8版）课后习题答案

【1-01】 计算机网络可以向用户提供哪些服务? 解答：这道题没有现成的标准答案，因为可以从不同的角度来看“服务”。 首先要明确的是，计算机网络可以向用户提供的最重要的功能有两个：连通性和共享。所 谓连通性，就是计算机网络使上网用户之间都可以交换信息，好像这些用户…...

编程日记 2024/8/2 1:17:03

我们的网站被狗爬了！

大家好&#xff0c;我是程序员鱼皮。 世风日下&#xff0c;人心不古。我们的程序员面试刷题网站 《面试鸭》 才刚刚上线了一个多月&#xff0c;就由于过于火爆&#xff0c;被不少同行和小人发起网络攻击。 而且因为我们已经有 4500 多道人工整理的企业高频面试题、100 多个各…...

编程日记 2024/8/2 1:16:02

docker安装与container基本使用

安装 Homebrew 的 Cask 已经支持 Docker for Mac, mac用户狂喜 brew install --cask --appdir/Applications docker其他入门用法可参考 Docker Hello World- 菜鸟教程 或网上自行搜索博客学习。本文主要记录我运行go-zero-mall用到的一些注意点。当然&#xff0c;gonivinck项…...

编程日记 2024/8/2 1:15:01

掌握文本搜索的利器：深入解析 Linux grep 命令的强大功能

grep 是一个强大的命令行工具，用于在文件中搜索指定的模式（字符串或正则表达式）。它的名字来源于 "global regular expression print"，常用于文本处理、日志分析等任务。以下是 grep 命令的详细介绍和常用操作： 基本用法 搜索匹配的行 grep "pattern"…...

编程日记 2024/8/2 1:12:59

【天机学堂】面试总结

写在前面&#xff0c;首先要将天机学堂包装一下&#xff0c;智慧教育平台》&#xff0c;暂时就想到这个。天机学堂文档 1.包装简历 待更新。。。...

编程日记 2024/8/2 1:11:57

Java中Stream操作

Java中Stream操作 Stream 和 Optional区别 用途不同&#xff1a;Stream 用于处理集合中的元素序列&#xff0c;支持丰富的中间操作和终端操作&#xff1b;Optional 用于表示一个值可能为 null 的情况&#xff0c;提供了一种更优雅的处理方式。数据处理 vs. 容器&#xff1a;S…...

编程日记 2024/8/2 1:10:56

Spring Boot + MinIO 实现文件的分片上传、秒传、续传功能

文件上传是一个常见的功能需求。然而，传统的文件上传方式在面对大文件或不稳定的网络环境时，可能会出现性能瓶颈和上传失败的问题。为了解决这些问题，分片上传、秒传和续传技术应运而生. 技术选型 Spring Boot：一个快速开发框架，简化了 Spring 应用的搭建和配置。 MinIO：…...

编程日记 2024/8/2 1:09:55

Kafka基本概念，工作流程介绍

1、消息队列与Kafka 1.1、Kafka简介 Kafka使用scala开发&#xff0c;支持多语言客户端&#xff08;c、java、python、go等&#xff09; Kafka最先由LinkedIn公司开发&#xff0c;之后成为Apache的顶级项目。 Kafka是一个分布式的、分区化、可复制提交的日志服务 LinkedIn使…...

编程日记 2024/8/2 1:08:54

Golang | Leetcode Golang题解之第306题累加数

题目&#xff1a; 题解&#xff1a; func stringAdd(x, y string) string {res : []byte{}carry, cur : 0, 0for x ! "" || y ! "" || carry ! 0 {cur carryif x ! "" {cur int(x[len(x)-1] - 0)x x[:len(x)-1]}if y ! "" {cur i…...

编程日记 2024/8/2 1:07:53

快速排序（上）

快速排序 前言 快速排序算法是最流行的排序算法,且有充足的理由,因为在大多数情况下,快速排序都是最快的。所以学习快速排序算法十分有必要。当然&#xff0c;既然它这么好&#xff0c;也就不太容易理解。 正文 Hoare版快排 快速排序是Hoare在1962年提出的一种二叉树结构的…...

编程日记 2024/8/2 1:06:52

数据结构-队列

队列对于临时数据的处理也十分有趣&#xff0c;它跟栈一样都是有约束条件的数组。区别在于我们想要按什么顺序去处理数据&#xff0c;而这个顺序当然是要取决于具体的应用场景。 你可以将队列想象成是电影院排队。排在最前面的人会最先离队进入影院。套用到队列上&#xff0c;…...

编程日记 2024/8/2 1:04:50

MySQL：操作符

MySQL 操作符 MySQL 操作符是 MySQL 数据库操作中不可或缺的一部分&#xff0c;它们用于执行各种数据运算、比较、逻辑判断等。 MySQL 中有多种操作符可用于数据查询和筛选 MySQL 所提供的运算符可以直接对表中数据或字段进行运算 MySQL 支持 4 种运算符&#xff0c;分别是&…...

编程日记 2024/8/2 1:02:47

反序列化靶机实战serial（保姆级教程）

一.信息收集 靶机地址下载&#xff1a;https://download.vulnhub.com/serial/serial.zip 打开靶机&#xff0c;在kali虚拟机中进行主机存活探测 可以知道靶机ip地址为192.168.133.171 然后扫描端口 可以发现有一个22端口跟80端口 然后接下来用kali扫描它的目录 可以发现有一…...

编程日记 2024/8/2 1:01:45

【Git】git 从入门到实战系列（一）—— Git 的诞生，Linus 如何在 14 天内编写出 Git？

<> 博客简介&#xff1a;Linux、rtos系统&#xff0c;arm、stm32等芯片&#xff0c;嵌入式高级工程师、面试官、架构师&#xff0c;日常技术干货、个人总结、职场经验分享   <> 公众号&#xff1a;嵌入式技术部落   <> 系列专栏&#xff1a;C/C、Linux、rt…...

编程日记 2024/8/2 0:59:44

com.microsoft.sqlserve r:sqljdbc4:jar:4.0 was not found in......如何解决？

这个错误提示说 com.microsoft.sqlserver:sqljdbc4:jar:4.0 这个依赖无法从 Maven 中央仓库&#xff08;https://repo.maven.apache.org/maven2&#xff09;下载&#xff0c;导致项目无法构建。以下是解决该问题的几种方法&#xff1a; 方法一&#xff1a;手动安装依赖 下载 J…...

编程日记 2024/8/2 0:58:43

数据集——鸢尾花介绍和使用

文章目录 一、鸢尾花数据集内容二、使用中常转换DataFrame 一、鸢尾花数据集内容 from sklearn import svm, datasets # 鸢尾花数据 iris datasets.load_iris() print(iris.data) X iris.data[:, :2] # 为便于绘图仅选择2个特征 y iris.target它包含了150个样本&#xff0c…...

编程日记 2024/8/2 0:57:40

网站建设服务项目/外链代发平台

linux初学者-进程篇 不管是windows还是linux&#xff0c;都有进程&#xff0c;那么什么是进程呢&#xff1f;进程就是cpu未完成的工作。下面会介绍一些关于系统中进程的查看以及管理的方法。 1、命令 1.1、命令使用 查看进程&#xff0c;使用的命令是"ps"&#xff0c…...

编程日记 2025/1/16 23:06:44

wordpress安装不了主题/搭建网站基本步骤

PhotoShop修复工具组 污点修复画笔工具属性调节画笔和污点差不多大小一般在图层上面新建一个图层&#xff0c;在新建图层上使用污点修复工具&#xff08;勾选对所有图层取样&#xff09;修复画笔工具属性使用方式&#xff1a;先按住ALT取样&#xff0c;再使用。&#xff08;ATL…...

编程日记 2025/1/16 20:42:25

西安有哪些做网站建设的公司好/网络推广员好做吗

在接口测试学习过程中&#xff0c;遇到了利用requests库进行文件下载和上传的问题。同样&#xff0c;在真正的测试过程中&#xff0c;我们不可避免的会遇到上传和下载的测试。文件上传&#xff1a;url ztx.hostupload/uploadFile?CSRFTokenself.getCSRFToken()#上传文件的接口…...

编程日记 2025/1/16 19:06:21

微博带动网站做排名/有效果的网站排名

微信好友分析及机器人 一、微信好友分析 1、统计好友&#xff0c;城市分布&#xff0c;个性签名并保存为excell #导入模块 from wxpy import * #初始化机器人&#xff0c;选择缓存模式&#xff08;扫码&#xff09;登录 bot Bot(cache_pathTrue) #获取我的所有微信好友信息 fr…...

编程日记 2025/1/16 16:22:47

品牌设计公司网站/拼多多关键词排名查询软件

前段时间公司网站发生一些用户访问不了的情况&#xff08;主要分布在北方&#xff09;&#xff0c;报错是如下图等 比较奇怪&#xff0c;公司网站是使用的nginx &#xff0c;但没有把版本信息修改成 fd2 &#xff0c;像是客户上网那个地方代理后报的错误。 从运营同事那里获取部…...

编程日记 2025/1/16 15:37:02

table做网站/网站推广优化方案

在filter中经常会遇到>begindate这样的例子 而最终导致和日期提示控件之间相互比较的时候报错&#xff0c;日期格式类错误 于是做了如下的操作&#xff0c;再次用新的参数添加过滤器&#xff0c;一切正常。神奇的mysql. 第一步&#xff1a; cast([日期],varchar(8)) 第二步&…...

编程日记 2025/1/16 13:56:05