transform属性的translate()实现元素平移

sxysoft_csdn 2021-05-10 09:58:49

在CSS3中，我们可以使用transform属性的translate()方法来实现元素的平移效果。

css语法如下：

transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴同时平移*/
说明：

从上面可以看出，平移有3种情况： translateX()、translateY()、translate()。参数x表示元素在x轴方向上的移动距离，参数y表示元素在y轴方向上的移动距离，两者的单位可以为px、em和百分比等。

参考链接地址如下:
http://www.xinbiancheng.cn/qa/6097a4cf3b6eb91610f1b519.html

...全文

490 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

sxysoft_csdn 2021-05-19

打赏
举报

回复

CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。 translate()函数接受CSS的标准度量单位；scale()函数接受一个0和1之间的十进制值；rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。C

移动端的项目经常会引入手势库来实现拖拽不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算最近的项目中就有这么一个需求：因为就这一个地方需要拖拽，所以我就没有引入第三方库移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 2. 使用 transform 中的平移translate 属性实现拖拽。方案一：固定定位 fixed 这种方案的核心就是给元素添加固定定位position:fixed; 但定位之后，元素会脱离文档流，会影响原有但布局因此在开始拖拽 (触发touchstart事件) 的时候，需要将原本的元素 A

transform属性 # 属性属性 transform: translate/translateX translateY perspective translateZ; translate 中文意思为平移，通过 X 轴，Y 轴来移动元素。 translate(x, y) x，y 可设置为百分比值，代表着基于自身宽度/高度的百分比， <!DOCTYPE html> <html lang="en"> <head> <meta chars

translate平移应该也算是transform中用的比较多的属性之一了，用法：transform：translate（x轴平移，y轴平移），也可以单独设置：transform：translateX（），transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。后期在transform-3D还会有transform：transl

transform属性可以使元素进行缩放、平移、旋转等2D、3D的变换语法： transform: none/transform-function; 参数： translate(x,y) 定义2D转换，表示在x轴和y轴上进行平移 translate3d(x,y,z) 定义3D转换 translateX(x) 表示在x轴上进行平移 translateY(y) 表示在y轴上进行平移 translateZ(z) 表示在z轴上进行平移 rotate(deg) 表

61,115

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章