在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5/ CSS3 transform多值先后執(zhí)行順序問(wèn)題

CSS3 transform多值先后執(zhí)行順序問(wèn)題

在網(wǎng)上的一個(gè)視屏教程中看到transform的順序時(shí)提到transform的執(zhí)行循序是后寫(xiě)的先執(zhí)行，比如：

this.style.transform = "rotateZ(180deg) translateX(50px)"

視屏上講解的是先執(zhí)行平移，再旋轉(zhuǎn)，就是先寫(xiě)的后執(zhí)行，但是見(jiàn)網(wǎng)上的一些博客里提到

：在transform中，當(dāng)我們同時(shí)有位移和其他屬性的時(shí)候，記得要將位移放到最前，先位移到我們期望的位置，然后再進(jìn)行其他的形變。

這個(gè)意思應(yīng)該就是按順序執(zhí)行的，
那到底transform有多個(gè)值時(shí)是怎么執(zhí)行的，還有位移時(shí)的中心點(diǎn)會(huì)不會(huì)發(fā)生變化，這一塊很迷惑，若有人推薦好的文章或解答一下的話不勝感激！

回答
編輯回答
敢試

transform的本質(zhì)其實(shí)就傳入一個(gè)矩陣，對(duì)矩陣的處理，
鏈接: https://www.cnblogs.com/Ivy-s...

2018年5月23日 08:42
編輯回答
葬憶

我覺(jué)多個(gè)值得時(shí)候是按順序執(zhí)行，位移得中心點(diǎn)會(huì)根據(jù)當(dāng)前元素得狀態(tài)發(fā)生變化。
假設(shè)第一種情況：
div {

 width: 100px;
 height: 100px;
 background: red;
 transform: translateX(100px) scale(.5) ;

}
<div></div>
這里會(huì)先執(zhí)行translateX,然后到scale,translateX是根據(jù)未scale進(jìn)行位移的。

假設(shè)第二種情況：
div {

 width: 100px;
 height: 100px;
 background: red;
 transform:  scale(.5) translateX(100px); /* 這里調(diào)換順序 */

}
<div></div>
這里會(huì)先執(zhí)行scale,然后到translateX,translateX是根據(jù)scale后進(jìn)行位移的。
大家可以試試這兩種情況，translateX的距離會(huì)不一樣

2017年5月7日 09:06