2D 轉(zhuǎn)換模式
transform:rotate(45deg)
deg 是單位，代表旋轉(zhuǎn)多少度
transform:translate(100px,0px);
第一個(gè)參數(shù)水平方向
第二個(gè)參數(shù)垂直方向
代表塊的平移
transform:scale(1.5);
元素的縮放
第一個(gè)參數(shù)：水平方向
第二個(gè)參數(shù)：垂直方向
注意點(diǎn)：如果取值是1，代表不變
如果取值大于1，代表需要放大
如果取值小于1易茬，代表需要縮小
如果水平和垂直縮放都一樣姿骏，那么可以簡(jiǎn)寫為一個(gè)參數(shù)
- 連寫注意點(diǎn)
- 如果需要進(jìn)行多個(gè)轉(zhuǎn)換那么用空格隔開
- 2D 的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系，所以旋轉(zhuǎn)之后再平移就不是水平平移了
transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5);
2D 轉(zhuǎn)換模塊-形變中心點(diǎn)
- 默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的豹悬，我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改它的參考點(diǎn)
transform-origin:200px 0px;
transform-origin:50% 50%;
transform-origin:center center;
- 第一個(gè)參數(shù)：水平方向
- 第二個(gè)參數(shù)：垂直方向
注意點(diǎn)
取值三種形式葵陵，具體像素/百分比/特殊關(guān)鍵詞
2D 轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向
- 什么是透視
近大遠(yuǎn)小
注意點(diǎn)
一定要注意，透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
perspective:500px;
- 默認(rèn)情況所有元素都是圍繞 Z 軸進(jìn)行旋轉(zhuǎn)的
- 想圍繞哪個(gè)軸旋轉(zhuǎn)那么就在 rotate 后面直接加上哪個(gè)軸即可
transform:rotateY(45deg);
transform:rotateX(45deg);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
