如何动态更改X和Y轴的起点？
动态更改X和Y轴的起点可以通过调整坐标系的原点来实现。在前端开发中，可以使用CSS的transform属性来实现坐标系的平移操作。
对于X轴的起点，可以通过设置元素的transform属性的translateX值来实现平移。例如，如果要将X轴的起点向右平移100像素，可以使用以下代码：
transform: translateX(100px);对于Y轴的起点，可以通过设置元素的transform属性的translateY值来实现平移。例如，如果要将Y轴的起点向下平移50像素，可以使用以下代码：
transform: translateY(50px);如果需要同时更改X和Y轴的起点，可以将translateX和translateY的值同时设置。例如，将X轴的起点向右平移100像素，Y轴的起点向下平移50像素，可以使用以下代码：
transform: translate(100px, 50px);这样就可以实现动态更改X和Y轴的起点。在实际应用中，可以根据具体需求动态调整平移的数值，实现灵活的坐标系变换。
关于腾讯云相关产品和产品介绍链接地址，由于不能提及具体品牌商，建议您参考腾讯云官方文档或咨询腾讯云的客服人员，获取相关产品和解决方案的信息。
相关·内容
1回答
固定轴上旋转CSS立方体
css、3d、rotation、css-transforms
我有一个用CSS构造的立方体。它由6个面组成，每个面被变换成立方体的一个面，所有的6个面都在一个<div>下，并带有类.cube。我对立方体所做的任何旋转都是在这个封闭的cube类上完成的。
我希望立方体旋转基于鼠标拖动输入。到目前为止还挺管用的。我只是将x和y鼠标运动转化为围绕x和y轴旋转的立方体。
但这有一个大问题。我以一个简单的方式执行轮换
transform: rotateX(xdeg) rotateY(ydeg)
CSS属性这方面的问题是，y轴的旋转是随着x旋转的。
假设我把立方体绕x轴旋转90度。现在，如果我尝试沿着y轴旋转立方体90度，我会期望立方体向右或向左旋转90
浏览 2提问于2017-07-01得票数 4
回答已采纳
1回答
如何使用css动画将div水平移动然后垂直移动？
jquery、css
我想要移动一个div水平，然后垂直使用css动画，如下图所示。黑色箭头线表示我要移动绿色框的方式。但是，框在水平移动后，它以对角方向移动，以蓝色箭头表示，而不是由垂直向下箭头垂直显示。
.mybox {
width: 100px;
height: 100px;
background-color: lawngreen;
}
.myanimation{
-webkit-animation: simple 3s forwards ease;
}
@-webkit-keyframes simple {
50% {
-webkit-transform: tr
浏览 4提问于2014-12-09得票数 1
回答已采纳
3回答
旋转CSS立方体
css、css-transforms
我想要创建一个CSS立方体，它有4个边(正面，背面，顶部，底部)，它只在X轴上不断地向上(或向下)旋转。但由于某种原因，我不能对齐所有的4面，所以它看起来像一个立方体。这是我的标记：
<div class="cube">
<div class="front">
<h1>Front</h1>
</div>
<div class="bottom">
<h2>Bottom</h2>
</div>
<div class=
浏览 5提问于2015-01-19得票数 3
回答已采纳
3回答
是否有可能使元素的旋转速度比它在CSS中的转换速度慢？
html、css、css-animations
我正在摆弄3D CSS动画，我遇到了一个问题，我有一个移动元素，正在X轴上被转换。此转换运行2秒。但是，我也想将旋转应用到Y轴上的元素，该元素运行30秒。
我遇到的问题是，由于在CSS中平移和旋转都是transform属性的一部分，所以似乎没有一种方法可以对它们分别应用不同的时间。
.ball {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
animation: animate 2s
浏览 2提问于2021-06-04得票数 0
回答已采纳
3回答
沿一个轴平移元素，同时保持另一个轴不变
html、css
我有一个应用了transform: translateX(some_percent)的超文本标记语言元素。
有没有一种方法可以在不改变x轴平移的情况下沿y轴对此元素进行动画处理？
//编辑
需要澄清的是，some_percent是未知的，也没有办法访问它。
我感兴趣的是，如果这在一般情况下是可能的，而不需要更改html。在我看来，似乎翻译总是(x，y)的向量，而只是translate(0,y)的简写。
浏览 0提问于2017-10-11得票数 0
2回答
鼠标光标上的CSS3缩放
javascript、css、dom-events、zooming、coordinate-transformation
我的目标是创建一个插件，支持页面区域的缩放和平移操作，就像Google Maps目前的工作方式一样(意思是:用鼠标滚动=放大/缩小区域，单击&按住&移动&释放=平移)。
滚动时，我希望以鼠标光标为中心进行缩放操作。
为此，我使用了动态CSS3矩阵转换。唯一的强制约束是，我不能使用CSS3 translate & scale转换之外的任何其他转换，转换原点为0px 0px。
平移不在我的问题范围之内，因为我已经让它工作了。当涉及到缩放时，我正在努力找出我的Javascript代码中的错误所在。
问题一定出在MouseZoom.prototype.zoom函数的某处
浏览 0提问于2012-07-16得票数 17
2回答
Firefox CSS动画平滑(亚像素平滑)
css、firefox、animation、css-animations
我正在创建一个CSS关键帧动画，使一个元素看起来好像是随意地/缓慢地浮动了一点。它嵌套在父母中，一个使用translateX()缓慢地左右移动它，另一个使用translateY()缓慢和独立地上下移动它。
Chrome和Safari完美地实现了这一点，给了它一个逐渐摇摆的运动。它平滑动画(也许使用亚像素平滑？)所以一切看起来都很顺利。然而，火狐将它逐个像素地动画化，所以你可以看到它在每一个像素上跳跃，而不是平稳地摇摆。
查看Chrome和FireFox中的FireFox以查看差异：
有什么方法可以使FireFox平滑地呈现这一点，而不是让它一个像素一个像素地跳？在实际的应用程序中，这是非常明显
浏览 3提问于2015-01-10得票数 15
回答已采纳
1回答
网页动画应用编程接口和css3关键帧的区别？
css、css-animations、web-animations
我发现了css3关键帧和web动画api之间的区别。试试这个演示。
相同的选项：
@keyframes test {
0% { transform: translateX(0px) translateY(0px);}
20% { transform: translateX(0px) translateY(50px);}
40% { transform: translateX(0px) translateY(100px);}
60% { transform: translateX(0px) translateY(150px);}
80% { transform: t
浏览 35提问于2018-07-31得票数 0
回答已采纳
2回答
CSS翻译在前面还是在另一个div后面
html、css、svg、transform
我试图用CSS转换来翻译y轴中的svg图形。翻译部分我没什么问题：
transform: translate3d(0, -100px, 0);
但是，在Y方向向上的100 up将svg图形移动到父div后面。我尝试过在不同的元素上添加不同的z索引，但是无法让svg图形出现在前面。
这是你想要的图片我的意思是：
在translate之后
transform: translate3d(0, -100px, 0);
浏览 3提问于2015-05-05得票数 2
回答已采纳
1回答
通过CSS3实现动画
css
我期待着在圆圈上看到一些动画。我没有！圆圈在页面加载时保持不动。我已经在FF和Chrome中尝试过了。据我所知，语法是正确的吗？
<!doctype html>
<html>
<head>
<title>CSS animations</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#balloon-one {
浏览 0提问于2012-10-06得票数 0
3回答
用不同的计时函数转换x和y？
css、css-transitions、css-transforms
目前，我正在使用以下代码以相同的速度转换x和y：
-webkit-transition:all 180ms ease-out;
我想将X轴平移得比Y轴慢。是否可以指定类似于：
-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;
提前感谢！
浏览 5提问于2012-01-19得票数 4
2回答
创建多维数据集打开动画
css、css-animations、css-shapes、css-transforms
我有下面的HTML和CSS代码来绘制多维数据集的顶部。所以它向下移动，我想让它像打开一样充满活力。我不知道如何改变顶部，使它看起来开放。
我已经包含了立方体的全部代码。关于这一点，我想要打开顶部。
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 au
浏览 1提问于2016-12-06得票数 11
回答已采纳
2回答
转换: translateX正在影响转换: translateY
html、css、transform、translate
我在给汉堡菜单做动画。当我试图改变.burger-icon:before - transform: translateX(20px)中的X坐标时，它也改变了Y。谢谢!
下面是HTML：
<button class="menu-button" type="button" data-toggle="-menu" id="burger-button">
<span class="burger-icon"></span>
</button>
这是我的CSS：
.men
浏览 3提问于2017-03-02得票数 1
1回答
我们可以使用+=转换:旋转(‘x’‘deg)；css属性通过Javascript
javascript、jquery、css、transform
这是我的密码：
#move{
height:70px;
width:70px;
border:2px solid black;
border-radius:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Move Right" onclick="
$('#move'
浏览 3提问于2015-08-10得票数 3
回答已采纳
4回答
css3:水平居中元素的translateX
html、css、transform、centering
我尝试将一个元素水平居中：
<div id="parent">
<div id="child">
</div>
在孩子上，我现在有以下css，它没有居中：
transform: translateX(50%);
不幸的是，50%取自#子代，而不是父代。有没有办法使用变换使这个元素居中(我知道我可以用‘left’将它居中)？
下面是css的完整列表
#parent {
width: 300px
height: 100px;
background-color: black;
border:
浏览 0提问于2013-12-12得票数 7
3回答
React原生变换原点
css、reactjs、react-native、transform
如何将transform-origin属性应用于react native中的样式？我尝试了几种方法，但都没有得到事件
我试过了：
transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ]
浏览 0提问于2018-09-29得票数 21
我在中有一个css动画，可以在iphone的safari上运行，但是如果我试图在没有其他东西的上运行它，它就无法运行第二个动画。奇怪的是，小提琴也没有显示黑色的背景和黄色的边框。这可能是什么原因造成的？
<style style="text/css">
#AdvertBox {
height: 50px;
overflow: hidden;
position: relative;
background:black;
color: white;
b
浏览 0提问于2017-02-18得票数 0
回答已采纳
1回答
使用CSS启动新动画时不要重置转换
javascript、css、animation、css-animations
小提琴：
我有几个街区旋转不同的角度在开始。我想把它们沿着旋转的轴，点击。但是平移动画会重置旋转角度。我知道我可以将转换链接到旋转+转换，但我需要多个动画(每个块一个)。CSS是否提供了一种将当前状态作为新转换参考的方法？
Html：
<button type="button" onclick="move()">
Animate blocks
</button>
<button type="button" onclick="reset()">
Reset
</button>
浏览 2提问于2021-12-27得票数 1
2回答
使用JavaScript修改CSS属性，而不替换旧属性。
javascript、css、properties、transform、mousemove
我正在尝试创建一个HTML元素，它根据鼠标的坐标移动。我使用了'mousemove‘事件，为了移动我的元素，我使用了offsetX/Y事件的属性。
例如，如果我只应用水平移动(所以我只使用offsetX)，它将会工作。但当我应用垂直移动时，它将不再起作用。我使用了'transform‘CSS属性，我知道问题出在哪里，但我不知道如何解决它。这是因为我应用了一个新属性来垂直移动，但随后删除了让元素水平移动的旧属性。
那么你知道如何将多个CSS属性(相同的)添加到一个元素中吗？我试着用"+“把它们加在一起，或者放在同一个中，但是不起作用。
我希望我已经讲清楚了，并为我的英语道
浏览 25提问于2021-05-13得票数 0
1回答
Safari中转换的奇怪行为
html、css
如果我在Chrome中使用下面的代码，它会像预期的那样运行。在Safari (v13.1.1)中，它首先转换宽度和y平移，然后x平移跳转到适当的位置。我期待所有3个属性的平滑过渡，就像它在Chrome中做的那样。 button = document.querySelector('.button')
block = document.querySelector('.block')
button.addEventListener('click', () => {
block.classList.toggle('active&
浏览 18提问于2020-07-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
