CSS缩放变换影响位置计算
在 CSS 中，使用 transform: scale() 进行缩放变换时，元素的大小会发生变化，但其在文档流中的位置计算可能会受到影响。这是因为 transform 属性不会影响元素的布局位置，而是应用于渲染层。因此，缩放变换不会改变元素在文档流中的位置，但会影响其视觉上的大小和位置。
问题描述
假设你有一个元素，通过 transform: scale() 进行缩放变换。你可能会发现，虽然元素的大小发生了变化，但其在文档流中的位置没有改变。这可能会导致一些布局问题，特别是当你需要精确定位元素时。
示例
以下是一个简单的示例，展示了缩放变换如何影响元素的视觉位置，但不影响其在文档流中的实际位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Scale Example</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>在这个示例中，.box 元素被缩放了 1.5 倍，但其 top 和 left 属性仍然是相对于其未缩放的大小进行计算的。这意味着 .box 元素的视觉位置会发生变化，但其在文档流中的位置没有改变。
解决方案
如果你需要在缩放变换后调整元素的位置，可以使用 JavaScript 来计算缩放后的尺寸和位置，或者使用 CSS 的 transform-origin 属性来调整变换的原点。
使用 transform-origin
transform-origin 属性允许你设置变换的原点。默认情况下，原点是元素的中心。你可以通过调整 transform-origin 来改变缩放变换的效果。
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
transform: scale(1.5);
transform-origin: top left; /* 设置变换原点为左上角 */
}使用 JavaScript 计算位置
你也可以使用 JavaScript 来动态计算缩放后的尺寸和位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Scale Example</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<script>
const box = document.querySelector('.box');
const scale = 1.5;
// 获取元素的初始位置和尺寸
const rect = box.getBoundingClientRect();
const initialTop = rect.top;
const initialLeft = rect.left;
const initialWidth = rect.width;
const initialHeight = rect.height;
// 计算缩放后的位置和尺寸
const scaledWidth = initialWidth * scale;
const scaledHeight = initialHeight * scale;
const scaledTop = initialTop - (scaledHeight - initialHeight) / 2;
const scaledLeft = initialLeft - (scaledWidth - initialWidth) / 2;
// 应用缩放和调整后的位置
box.style.transform = `scale(${scale})`;
box.style.top = `${scaledTop}px`;
box.style.left = `${scaledLeft}px`;
</script>
</body>
</html>相关·内容
我想在某些条件下实用地控制缩放。我如何才能做到这一点？编辑: window.visualViewport.scale与CSS变换的缩放是完全不同的，后者以前被认为是这个问题的解决方案，也是锁定这个问题的原因。CSS变换在布局视口中操作，而visualViewport缩放不影响每个设计的布局。
浏览 1提问于2018-05-31得票数 0
1回答
我有一个元素，我可以使用CSS3转换来缩放和移动它。我的目标是始终在鼠标位置进行缩放，因此我将元素的转换原点设置为元素的相对鼠标位置。从比例1放大和缩小效果很好，但当我将光标移动到缩放的元素上时，设置转换原点也会移动元素。有人能帮我吗？
浏览 1提问于2013-05-16得票数 1
给定一个具有平移和缩放矩阵的平面，我有一个只能平移但不能缩放的重叠点，并且必须停留在平面上的同一个点上。例如，如果使用以下变换转换平面：我可以在这一点上与之相匹配。如何在不缩放点的情况下找到移动该点以匹配平面的平移？很抱歉，如果这看起来很明显，我在数学上有点困难。
浏览 1提问于2013-12-01得票数 0
在某些情况下，我使用jquery添加了一个类来扩展div：css：
.doubleDiv{ transform: scale(
浏览 2提问于2014-08-11得票数 0
回答已采纳
2回答
使用局部缩放和旋转缩放对象
、、、、
我有一个对象，它有一个位置，一个旋转角和一个刻度(x和y)。，然后修改对象的局部缩放。例如，对象旋转了45度，我应用了1,2的比例，我需要知道这如何影响局部比例，因为它应该影响两个局部比例轴。更新:我认为我至少需要有一个3列乘2行的矩阵变换来保存足够的信息，我在SVG中尝试了一些东西，它使用了这种矩阵变换，它似乎是有效的，我需要根据位置和旋
浏览 3提问于2010-06-25得票数 1
回答已采纳
0回答
我正在尝试使用变换来将图像缩放到完整大小。
这就是我试图计算顶部和位置的方法，它几乎是有效的，但平移是基于图像的原始大小，而不是缩放大小。我可以通过应用不同的css来解决这个问题吗?或者我必须计算出另一个转换值？
浏览 10提问于2016-12-28得票数 0
1回答
粒子实现的性能
、、
每个粒子都必须更新每一个帧(位置、旋转、缩放)，所以我想知道哪种方式通常更快：计算平移，旋转，缩放成一个变换矩阵，并发送给GPU阴影为每个粒子。
浏览 0提问于2019-11-08得票数 1
回答已采纳
5回答
抓取以使用CSS3进行缩放
、、、、
我正在尝试实现与Google Maps中完全相同的收缩到缩放手势。我看了斯蒂芬·伍兹- -关于这个问题的演讲，并使用了上面提到的技巧。其思想是将目标元素的变换原点设置为(0，0)，并在变换点进行缩放。然后平移图像，使其在变换点居中。
在我的测试代码中，缩放工作得很好。图像在后续平移之间可以很好地放大和缩小。问题是我没有正确计算转换值。我正在使用jQuery和Hammer.js来处理触摸事件。如何在transform回调中调整我的计算，使图像保持在转换
浏览 0提问于2012-05-29得票数 25
回答已采纳
3回答
计算变形体的体积
、、
所以我想计算使用任意变换矩阵变换的球体(单位球)，长方体(立方体)的体积。
例如:我在3D空间的中心得到半径为1的球体。然后我得到了一个应用于该球体的变换。体积是多少(分别为半径)在那之后？我知道平移和旋转矩阵不会影响这一点，但缩放矩阵会。提前感谢！
浏览 1提问于2014-07-08得票数 0
我正在尝试实现图像缩放效果，有点像Google Maps的缩放效果，但使用的是固定位置的图像网格。我已经使用CSS3变换实现了缩放功能：...however，我依靠外部div上的鼠标X/Y位置来放大鼠标光标所在的位置</e
浏览 1提问于2010-05-13得票数 4
回答已采纳
1回答
当在新的iPad(v3) iOS 5.1(9B176)上加载到普通站点时，没有任何滚动和缩放问题。有24个实例显示了sprite的一部分。在移动站点上没有缩放功能，因为viewport设置为user-scalable=0。谢谢。
浏览 2提问于2012-04-17得票数 1
2回答
抖动视差滚动
、、
页面已使用CSS3变换缩放，并在调整大小时，使用JavaScript / jQuery自动调整页面大小。还有其他解决方案吗？
浏览 21提问于2016-08-01得票数 0
回答已采纳
我需要缩放一个应用程序，以适应它的内部和如果是固定的大小，但我注意到比extjs 4组合框列表不工作缩放，这是我第一次看到这个问题与规模转换，我想它影响到所有浮动组件在ext。下面是一个例子
身体{-webkit-变换:刻度(0.8)；-moz-变换:刻度(0.8)；-ms-变换:刻度(0.8)；-o变换:刻度(0.8)；变换:刻度(0.8)；} //示例从extjs文档Ext.onReadyqueryMode：'loc
浏览 4提问于2014-02-27得票数 1
回答已采纳
2回答
此位图受变换矩阵(缩放和滚动)的影响。我正在尝试实现一个类似于GoogleMaps的外观，当背景图像被平移/缩放时，控件不会移动。我试着把一个ButtonControl放在我的显示窗口上。我尝试捕获滚动事件，然后调整ButtonControl的位置。这也有延迟更新的效果，所以它看起来不是很好。
任何想
浏览 1提问于2011-05-28得票数 0
在场景中，我将检测到的对象作为具有BufferGeometry和从AI输出更新的position attributes的父网格，我需要在顶点变化时计算其变换矩阵，并将这些变换应用于其子对象。如何计算从一个“检测(位置顶点)”到另一个“检测(位置顶点)”的转换矩阵(平移、缩放、旋转)。这是我的问题的一个简化说明，其中蓝色平面是检测到的对象，红色平面是它的子对象，我需要计算蓝色平面变换，将它们应用到红色平面上，这样它们就可以一起移动： h
浏览 32提问于2020-06-18得票数 1
1回答
我的目标是保留元素的默认大小和位置，无论用户放大或缩小了多少百分比。谁能给我点建议。document.documentElement.clientWidth / window.innerWidth;
$('.popup-overlay').css
浏览 0提问于2013-08-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
