如何解决使用翻译模拟转换原点
您几乎不错,但是有两个错误。您需要反转翻译,并且需要更改transform-origin
第二个翻译的翻译。
如果您查看文档,你会看到,参考使用翻译的原点是的元素的角落和改造的默认值起源center
。因此,我们需要为两者提供相同的参考。
.origin {
transform-origin: 50px 50px;
transform: rotate(45deg) scale(2);
}
.translate {
transform-origin:0 0;
transform:translate(50px, 50px) rotate(45deg) scale(2) translate(-50px, -50px);
}
.Box {
background-color: red;
width: 50px;
height: 50px;
}
.container {
display: inline-block;
margin: 30px;
width: 150px;
height: 150px;
background-color: rgba(0,0,0,0.1);
}
<div class="container">
<div class="Box origin">
</div>
</div>
<div class="container">
<div class="Box translate">
</div>
</div>
这是从规范:
转换矩阵是根据 和 属性计算的,如下所示:
-
从身份矩阵开始。
-
通过计算的变换原点的X和Y进行翻译
-
分别 *
-
通过 的转换原点的X和Y值进行转换
您需要注意措辞!您可能会发现MDN与规范矛盾,但事实并非如此,这仅仅是因为平移 (如MDN中所述)与平移 的 或局部坐标(如规范中所述)之间存在差异)。
例如,将元素平移-50px等效于将其局部坐标(原点)平移+ 50px。
您还需要注意 “从左到右相乘”, 因为这可能会造成混乱。如果我们在示例3中引用相同的规范,则我们具有:
div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}
此转换会在X和Y方向上将 系统 80个像素,然后应用150%的比例,然后绕Z轴顺时针旋转45°。 :先旋转元素,然后缩放,然后平移元素。
因此,从左向右相乘并不意味着从左向右相乘,这在某种程度上解释了反转您用于模拟的翻译的必要性transform-origin
:
解决方法
我想模拟在CSS 中transform-origin
使用的属性transform: translate
。
根据MDN,这很有可能:
通过首先使用属性的取反值转换元素,然后应用元素的变换,然后通过属性值进行转换,来应用此属性。
但是,当我尝试时,会得到不正确的结果。这两个矩形显然不相同:
.origin {
transform-origin: 100px 100px;
transform: translate(100px,0px) scale(2) rotate(45deg);
}
.translate {
transform: translate(-100px,-100px) translate(100px,0px) scale(2) rotate(45deg) translate(100px,100px);
}
.box {
background-color: red;
width: 100px;
height: 100px;
}
.container {
float: left;
margin: 100px;
width: 250px;
height: 250px;
background-color: rgba(0,0.1);
}
<div class="container">
<div class="box origin">
</div>
</div>
<div class="container">
<div class="box translate">
</div>
</div>
我已经尝试了很长时间没有运气寻找答案了,在我看来,这应该是相对简单的,我只是想不通。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。