css中的过渡对像素操作的底层原理 不解?
当过渡进行组合时, 会出现不符合预想的变换, 比如先放大在平移, 先旋转再平移, 由于会改变坐标轴和像素点的密度, 造成了不符合预期结果的出现, 关于每种过渡底层是如何操作的, 仍然存疑. 待解决
根据实验, 对此问题的猜想:
1 每一个元素维护一个自己的坐标系, 坐标原点是该元素的中心, 这个坐标中心好像可以改变(通过API)
2 坐标系的单位长度不变, 即不论怎么放大缩小[scale()]都不会改变该坐标系的单位长度, 改变的只是该元素所占的像素个数, 改变的时候仍然是以坐标原点为中心
3 承接第二条, 元素平移[translateX()]仍然是按照自己所维护的坐标轴进行平移, 并且, 自己所维护的坐标轴的坐标原点跟随自己移动, 即坐标原点永远都是自己的中心点
4 关于旋转[rotate()], 仍然是以自身所维护的坐标原点为中心(即自己的中心点), 旋转改变自身坐标轴的方向,
发现问题:
对于元素的组合变换, 按照上面的原理来说, 有与试验不太符合的地方:
源码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 width: 800px; 9 height: 600px; 10 border: 1px solid black; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 margin: 100px 0; 16 background: pink; 17 transition: 3s linear; 18 } 19 20 body:hover div:nth-of-type(1){ 21 transform:scale(.5) translateX(100px); 22 } 23 24 body:hover div:nth-of-type(2){ 25 transform:translateX(100px) scale(.5); 26 } 27 </style> 28 </head> 29 <body> 30 <div id="test1">1</div> 31 <div id="test2">2</div> 32 </body> 33 </html>
如果说是能够按照上面的原理, 每一次变换都是能够独立变换的, 两者的效果应该都是一样的, 但是第一个盒子变换效果属实让人无法理解原理
这种不合适的情况好像尤其突出体现在先平移后放缩的组合上, (第一种情况), 其他情况好像都是符合上述原理的.
关键一点:
所有的过渡都是一种瞬间状态, 没有一个变换的过程, 我们之所以看到一个变换过程是因为设置了变换时间(transition)
所以, 不论是2D变换还是3D变换, 不要觉得元素是在一点点变换, 其实已经变换了, 只不过是有一个放慢的过程
可以理解为两步:
第一步: 属性值瞬间变化
第二步: 元素的展示状态由初始值逐渐变化为改变值
关于展示状态正在改变时属性值又发生变化的理解:
属性值也是瞬间发生变化, 元素的展示状态由当前状态逐渐变化为改变值
