transform(變形)
CSS3中可以通過transform屬性修改元素的變形坤邪、旋轉(zhuǎn)卓箫、縮放埋涧、傾斜特性碘勉，在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate巷挥、傾斜skew、縮放scale和移動translate以及矩陣變形matrix
transform ： none | <transform-function> [ <transform-function> ]*
transform中使用多個變形函數(shù)時需要有空格隔開
rotate(旋轉(zhuǎn))
可以通過rotate使元素旋轉(zhuǎn)一定的度數(shù)
transform:rotate(30deg);
- 順時針旋轉(zhuǎn)一定角度验靡， 單位是角度deg（degree）
- 旋轉(zhuǎn)之后元素仍占據(jù)原來位置倍宾，實際上所有的transform都是這樣，縮放胜嗓、位移等都不會改變元素占據(jù)的位置
- 元素旋轉(zhuǎn)的的基點默認是中心(坐標(biāo)軸原點)高职，可以通過transform-origin屬性改變
transform:rotate(30deg);
transform-origin: 0% 0%;
transform-origin的取值可以是top, bottom, left, right, center, 或百分比，或長度值
transform-origin屬性對下面介紹的transform都有作用
坐標(biāo)軸
translate(位移)
可以通過translate使元素平移
transform:translate(x,y);
例子
transform:translate(200px,150px);
也可以簡單只移動一個坐標(biāo)
transform:translateX(100px);
transform:translateY(100px);
scale(縮放)
可以通過scale使元素縮放一定的比例辞州，和translate類似怔锌，也有三個方法
scale(x,y) /*使元素水平方向和垂直方向同時縮放*/
scaleX(x) /*元素僅水平方向縮放*/
scaleY(y) /*元素僅垂直方向縮放*/
transform:scale(2, 0.5);
transform:scaleY(0.3);
transform:scaleY(2);
transform:scale(3);
skew(傾斜)
可以通過skew使元素扭曲一定的度數(shù)，和上面一樣也有三中類似的用法
transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);
matrix(矩陣)
工具
transform多值的順序問題
當(dāng)transforrm屬性同時擁有多個變換函數(shù)時,順序的不同,得到的結(jié)果可能也會不同
<div class="item item1"></div>
<div class="item item2"></div>
.item{
width: 100px;
height: 100px;
border: 1px solid #111;
position: absolute;
top: 300px;
left: 300px;
}
.item2{
transform: translate(130px) rotate(45deg);
}
先x軸移動130px, 然后旋轉(zhuǎn)45度
.item2{
transform: rotate(45deg) translate(130px);
}
先旋轉(zhuǎn)45度, 然后x軸移動130px
我們會發(fā)現(xiàn)如果是先旋轉(zhuǎn), 然后x軸移動130px, 它不只是在x軸移動了, 在y軸也移動了, 這里個人的理解是旋轉(zhuǎn)之后, 我們的參考坐標(biāo)發(fā)生了變化,向這樣
當(dāng)旋轉(zhuǎn)45度后变过，元素的整個坐標(biāo)系都旋轉(zhuǎn)了45度
表盤
<p data-height="266" data-theme-id="0" data-slug-hash="GZXLZL" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >GZXLZL</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
