transform:translate()方法坐标详解

定义：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

但是如何移动呢？于是做了以下实验：

实验1.设置transform:translate(0px,0px),即延X轴和延Y轴均移动0像素，保持原有位置，做对比实验，为了方便说明，添加了坐标轴，如下所示：

实验2：设置transform:translate(10px,10px),即延X轴和延Y轴均移动10像素，对比原图位置，移动后的图如下所示，

结论：当移动的数是正数时，在Y轴方向上，相对原来的位置向下移动，在X轴方向上，相对原来的位置向右移动。

实验3：设置transform:translate(-50%,-50%),即延X轴和延Y轴均移动50%，对比原图位置，移动后的图如下所示，

结论：当移动的数是负数时，在Y轴方向上，相对原来的位置向上移动，在X轴方向上，相对原来的位置向左移动。

transform:translate()方法坐标详解相关推荐

golang导入git包_使用go module导入本地包的方法教程详解
go module 是Go1.11版本之后官方推出的版本管理工具,并且从 Go1.13 版本开始, go module 将是Go语言默认的依赖管理工具.到今天 Go1.14 版本推出之后 Go mod ...
java condition详解_Java使用Condition控制线程通信的方法实例详解
Java使用Condition控制线程通信的方法实例详解发布于 2020-4-20| 复制链接摘记: 本文实例讲述了Java使用Condition控制线程通信的方法.分享给大家供大家参考,具体如下 ...
python怎么画条形图-python绘制条形图方法代码详解
1.首先要绘制一个简单的条形图 import numpy as np import matplotlib.pyplot as plt from matplotlib import mlab from ...
python装饰器函数-Python函数装饰器常见使用方法实例详解
本文实例讲述了Python函数装饰器常见使用方法.分享给大家供大家参考,具体如下: 一.装饰器首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所 ...
batchnorm2d参数 torch_pytorch方法测试详解——归一化(BatchNorm2d)
测试代码: import torch import torch.nn as nn m = nn.BatchNorm2d(2,affine=True) #权重w和偏重将被使用 input = torch ...
android+发邮件,Android发送邮件的方法实例详解
Android发送邮件的方法实例详解时间:2021-05-20 本文实例讲述了Android发送邮件的方法.分享给大家供大家参考,具体如下: 在android手机中实现发送邮件的功能也是不可缺少的. ...
java servlet init方法_JSP开发Servlet重写init（）方法实例详解
jsp开发servlet重写init()方法实例详解写一个servlet时,有时需要我们重写该servlet的初始化方法,然后,究竟是重写init(servletconfig config),还是重 ...
python的socket模块_Python socket模块方法实现详解
这篇文章主要介绍了python socket模块方法实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 socket ssh (不带防止粘包的方 ...
oracle大对象实例_Oracle解析复杂json的方法实例详解
问题背景: 当前在Oracle数据库(11G之前的版本)解析json没有可以直接使用的系统方法,网上流传的PLSQL脚本大多也只可以解析结构较单一的json串,对于结构复杂的json串还无法解析.如此 ...

transform:translate()方法坐标详解

transform:translate()方法坐标详解相关推荐

最新文章

热门文章