css3属性transform之translate

最新推荐文章于 2025-05-27 16:38:22 发布
原创 最新推荐文章于 2025-05-27 16:38:22 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文深入解析CSS中的transform属性，特别是translateX与translateY的使用技巧。通过实例展示如何沿X轴和Y轴进行元素的平移操作，同时强调了平移操作不会改变元素的原有布局位置，适合前端开发者学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

translateY & translateX 偏移

transform:translate(60px); /* 沿X轴偏移60px（默认向右值为负数则向左） */
transform:translateY(60px) /* 沿X轴偏移60px */
transform:translateX(60px) /* 沿Y轴偏移60px */
transform:translateX(60px) translateY(60px);
transform:translate(60px,30px); /* 沿X轴偏移60px（默认向右值为负数则向左） 沿Y轴偏移30px（默认向下值为负数则向上） */

在这里插入图片描述

偏移不改变原有位置

未加 transform 之前，将两个div至于同一位置

在这里插入图片描述
在这里插入图片描述

给box2加 transform 则box2偏移

在这里插入图片描述
在这里插入图片描述

SupAack
关注
物体的移动Transform.Translate函数
qq2465922953的博客
12-07 2876
Transform.Translate通过设置下一步移动的矢量方向和大小进行移动。有两种移动方式：1.ADWS控制游戏对象上下左右移动，不涉及旋转；2.AD通过旋转控制方向，WS控制前后移动，也可以实现受控位移。无论哪种方式，首先都要获取键盘响应，可以通过Input.GetKey获取，也可以通过Input.GetAxisRaw获取。第一种方式下的代码如下：float input_A = Input.GetAxisRaw("Horizontal"); //获取X方向的移动方向，如果输入A，输出-1；如果输
前端CSS：CSS变形transform的所有属性
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 1138
CSS变形允许元素在二维或三维空间中进行位置、大小和形状的变换。它通过修改元素的坐标系来实现这些变换，可以应用于任何类型的元素，无论是块级元素还是内联元素。
css3系列之transform详解translate
weixin_30519071的博客
08-02 291
translate translate这个参数的，是transform 身上的，那么它有什么用呢？ 其实他的作用很简单，就是平移，参考自己的位置来平移 　　translate() 　　translateX() 　　translateY() 　　translateZ() 　　translate3d() translateX 向X轴平移，填正数往右平移，填负数，...
CSS 中的transform详解
最新发布
0.0的博客
05-27 1980
CSS 中的transform属性允许你对元素进行变形操作，包括旋转、缩放、平移和倾斜等。这个属性不会影响文档流，而是在视觉层面上对元素进行处理。
CSS3转换属性—transform之translate、rotate、scale函数详解
热门推荐
青春木鱼的博客
11-14 2万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
CSS3中的transform、translate和transition
庸人方自扰，自在就好
03-02 7237
之前一直搞不清楚哪个是哪个，哪个有什么用，因为三个都有trans前缀，可以称为“trans一族”。 1、transform 属性定义及使用说明：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 语法：transform: none|transform-functions; 例如： transform: translate(-30px,-50%); transform:rotate(7deg); 2、translate translate是t.
transform属性的translate
weixin_46564011的博客
12-25 885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
浅析CSS3 中的 transition，transform，translate之间区别和作用
11-21
在CSS3中，`transition`、`transform`和`translate`是三个非常重要的概念，它们分别用于创建不同的视觉效果和动态交互。理解这三个概念的区别和作用对于构建具有现代感和用户体验良好的网页至关重要。 首先，`...
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg);...clac是css3
css3 transform属性详解
12-13
CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
CSS3中的transform属性是前端开发中用于元素变形的常用工具，它不仅能够实现二维（2D）空间的变换，还能完成三维（3D）空间的变换效果。在进行介绍之前，我们先要了解transform属性的基本概念和其作用。 首先，...
transform: translate
qq_42622907的博客
11-06 629
transform: translate（x,y） 如transform: translate（40%，50%）作用为元素向右偏移自身宽40%的距离并向下偏移自身高50%的距离，类似margin-left和margin-top;
transform:translate
weixin_38249353的博客
11-24 936
transform:translate(-50%,-50%)实现水平垂直居中 translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而...
transform三大属性 rotate、scale、translate
weixin_44167504的博客
09-05 1万+
transform三大属性 transform三大属性：rotate(旋转) scale(缩放) translate(移动) 其他属性：skew(扭曲) matrix(矩阵变形) 语法：transform：rotate | scale | skew | translate |matrix; 一. 旋转rotate rotate(angle)定义2D旋转 rotateX(angle) rotateY(angle) rotateZ(angle) rotate3d(angle)定义3d旋转 二.
css3中translate、transform和translation，以及动画animation
alihlz_39337506的博客
03-27 487
example: 元素整体居中： .box{ position:absolute; top:50%; left:50%; width:50px; height:50px; transform:translate(-50%,-50%); background:gray; } 1.translate:移动，是transfor...
css3中的变形（transform）、过渡(transition)、动画(animation)
泊一的博客
09-03 2896
一.Transform（变形） 1. 2D转换之translate位移 2D转换：属性：transform,属性值：translate(X,Y),属性值也可以分开书写： transform:translate(X,Y) transform:translateX(n) transform:translateY(n) 注意： 1.1 2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内...
transform的translate属性
小手不要抖的博客
01-09 2151
今天在练习做登录表单的时候，发现了一个问题，放上表单后，父盒子上边距发生了塌陷。代码如下： .bg-img { position: relative; height: 100vh; background: url(bgimg.jpg); background-size: cover; background-position: center; } .bg-img::after { position: absolute; top: 0; left: 0; content: ""; wid
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
ranran0306的博客
03-17 6512
变换（transform）——移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）、基点变换（transform-origin）、动画（animation）
探究CSS3中的transition和transform属性
EmotionComputer
02-21 1995
开门见山的说，transition、transform和translate这三者经常有人搞混，先把这三者做一个简单解释： transform是 转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如 位移、缩放、旋转 等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。 transition是 过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。而transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值