逆战小白提升日記——css3 transform位移在复合写法中所受影响
css3 transform属性主要所影响的值主要有以下几种,旋转rotate,扭曲skew,缩放scale,和移动translate。而在复合写法时translate的位置不同,其最终实现效果也会受影响,其影响原理是什么呢?废话不多说,
看图↓ ↓ ↓
黑色块分别右移400px,200px
上图红色块:transforms:scale(2)translateX(200px)
下图红色块:transforms:translateX(200px)scale(2)
一般情况下transform复合写法先执行后面的操作,如transform: translateX() scale();
执行顺序先缩放再位移。但当位移操作位于后面时便会受到前一个操作的影响:
当代码为transforms:scale(2)translateX(200px)
时位移指令受放大指令的影响位移距离会放大两倍变成400px,然后执行放大操作。也就是说位移距离会受到缩放操作的影响而变化,位移距离变化倍数等于缩放倍数
当代码为translate(200px)scale(2)
时,便正常执行,放大两倍,右移200px。
黑色块分别右移200px,200px
上图红色块:transforms: rotate(45deg) translateX(200px)
下图红色块:transforms:translateX(200px) rotate(45deg)
由效果图我们可以轻易的看出,当translate()
位于rotate()
后面时,其位移方向会受到旋转操作的影响,方向偏移度数为45°。
也就是说当旋转操作位于位移操作前面时,位移方向会受到影响,方向变化的角度与旋转的角度相同。
好的,今天的分享到此结束,让我们一起共同进步吧!!!!