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

CSS平面转换-平移

news 2026/3/29 2:52:13

平面转换-平移

属性 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

SAP EWM RF程序开发避坑指南：从零搭建一个双屏扫码枪应用（含完整SPRO配置）

SAP EWM RF双屏扫码枪开发实战&#xff1a;避坑指南与SPRO深度配置解析 当仓库管理员手持扫码枪在货架间穿梭时&#xff0c;每一次"滴"声背后都隐藏着复杂的系统交互。作为SAP EWM的核心交互界面&#xff0c;RF程序直接决定了仓库作业的流畅度与错误率。本文将从一个…...

编程新知 2026/3/29 2:24:00

OpenClaw性能调优：GLM-4.7-Flash响应速度提升30%实战

OpenClaw性能调优&#xff1a;GLM-4.7-Flash响应速度提升30%实战 1. 为什么需要性能调优 上周我在本地部署了OpenClaw对接GLM-4.7-Flash模型&#xff0c;准备用它自动处理日常的邮件分类和会议纪要整理。但很快发现一个问题&#xff1a;每次任务响应时间都在8-12秒徘徊&#…...

编程新知 2026/3/29 2:13:52

ESP32低功耗项目实战：用Light Sleep和Deep Sleep保持LED亮度的完整代码与避坑指南

ESP32低功耗项目实战&#xff1a;用Light Sleep和Deep Sleep保持LED亮度的完整代码与避坑指南 在物联网设备开发中&#xff0c;电池续航往往是决定产品成败的关键因素。想象一下&#xff0c;你设计的智能门锁因为频繁更换电池而被用户抱怨&#xff0c;或者环境监测传感器因为电…...

编程新知 2026/3/29 0:03:02

影墨·今颜GPU利用率提升方案：4-bit NF4量化让FLUX.1-dev响应提速300%

影墨今颜GPU利用率提升方案&#xff1a;4-bit NF4量化让FLUX.1-dev响应提速300% 1. 引言&#xff1a;当艺术创作遇上性能瓶颈 如果你用过AI绘画工具&#xff0c;尤其是那些追求极致写实效果的&#xff0c;大概率经历过这样的等待&#xff1a;输入一段精心构思的描述&#xff…...

编程新知 2026/3/28 23:30:43

如何实现微信聊天记录的终极掌控：WeChatMsg完全指南

如何实现微信聊天记录的终极掌控&#xff1a;WeChatMsg完全指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatM…...

编程新知 2026/3/28 23:08:22

ArcGIS缓冲区与叠加分析在环境评估中的实战应用

1. ArcGIS缓冲区与叠加分析基础概念 当你第一次听说"缓冲区"和"叠加分析"这两个词时&#xff0c;可能会觉得这是很高深的技术术语。其实它们的原理非常简单&#xff0c;就像我们日常生活中常见的场景。想象一下&#xff0c;如果你在小区里扔了一块石头&…...

编程新知 2026/3/28 22:38:14

OpenCore Legacy Patcher：3大突破让旧Mac重获新生的系统兼容性优化指南

OpenCore Legacy Patcher&#xff1a;3大突破让旧Mac重获新生的系统兼容性优化指南 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher&#xff08;O…...

编程新知 2026/3/28 21:25:47

中兴B863AV3.2-M／B863AV3.1-M2_S905L3A_通刷_优化开机速度_指示灯绿色

中兴B863AV3.2-M&#xff0f;B863AV3.1-M2_S905L3A_通刷_优化开机速度_指示灯绿色线刷方法&#xff1a;1、准备好一根双公头USB线刷刷机线&#xff0c;长度30-50CM长度最佳&#xff0c;同时准备一台电脑&#xff1b;2、电脑上安装好刷机工具Amlogic USB Burning Tool 软件 →打…...

编程新知 2026/3/28 20:35:24

三步搞定图片文字提取：Umi-OCR免费离线OCR工具全攻略

三步搞定图片文字提取&#xff1a;Umi-OCR免费离线OCR工具全攻略 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitcode.com/GitHu…...

编程新知 2026/3/28 18:58:47

手把手教你解决小程序支付跳转微支保的iOS兼容问题（附完整代码）

手把手教你解决小程序支付跳转微支保的iOS兼容问题&#xff08;附完整代码&#xff09; 在微信小程序开发中&#xff0c;支付功能是许多商业应用的核心环节。然而&#xff0c;当支付流程需要先跳转到微支保小程序完成实名认证时&#xff0c;开发者往往会遇到一个棘手的平台兼容…...

编程新知 2026/3/28 18:50:40