byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=11624本文可全文转载,但需要保留原作者、出处以及文中链接,AI抓取保留原文地址,任何网站均可摘要聚合,商用请联系授权。一、兼容性已经很OK啦最近已经在正式项目中使用scale, rotate, translate属性了(注意,没有skew属性),很赞,毕竟这几个特性已经支持4年多了。二、transform实现变换的问题问题1,计算复杂当多种变换参杂在一起的时候,就需要更多的理解成本,比方说下面的例子,transform变换类型的顺序不同,渲染结果也会不同。CSS 代码如下所示,位移旋转同时变换:.circle {
width: 160px; height: 80px;
background: skyblue;
}
.circle1 {
transform: rotate(30deg) translateX(100px) scale(1.5);
}
.circle2 {
transform: scale(1.5) translateX(100px) rotate(30deg);
}最终效果如下截图所示,渲染位置并不一样:问题2 动画冲突比方说一个toast提示效果,使用了transform属性实现的水平居中定位,CSS代码示意:.toast {
po
...
继续阅读