-
原點 transform-origin
任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處
在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，
.wrapper {
? width: 400px;
? height: 100px;
? border: 2px dotted red;
? margin: 20px auto;
? text-align: center;
? line-height: 100px;
}
.wrapper div {
? background: orange;
? color: #fff;
? -webkit-transform: skew(15deg);
? -moz-transform: skew(15deg);
? transform: skew(15deg);
? -webkit-？: top right;
? -moz-？: top right;
? transform-origin: top right;
}查看全部 -
-矩陣 matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數(shù)學矩陣有一定的知識。查看全部 -
位移 translate()
translate()函數(shù)可以將元素向指定的方向移動，類似于position中的relative。
1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
.wrapper {
? width: 200px;
? height: 200px;
? border: 2px dotted red;
? margin: 20px auto;
}
.wrapper div {
? width: 200px;
? height: 200px;
? line-height: 200px;
? text-align: center;
? background: orange;
? color: #fff;
? -webkit-transform: translate(50px,100px);
? -moz-transform:translate(50px,100px);
? transform: translate(50px,100px);
}查看全部 -
scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮??；而任何大于或等于1.01的值，作用是讓元素放大。查看全部
-
縮放 scale()函數(shù) 讓元素根據(jù)中心原點對對象進行縮放。
縮放 scale 具有三種情況：
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
div:hover {
? -webkit-transform: scale(1.5,0.5);
? -moz-transform:scale(1.5,0.5)
? transform: scale(1.5,0.5);
}
注意：Y是一個可選參數(shù)，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
.wrapper {
? width: 200px;
? height: 200px;
? border:2px dashed red;
? margin: 100px auto;
}
.wrapper div {
? width: 200px;
? height: 200px;
? line-height: 200px;
? background: orange;
? text-align: center;
? color: #fff;
}
.wrapper div:hover {
? opacity: .5;
? -webkit-transform: scale(1.5);
? -moz-transform:scale(1.5)
? transform: scale(1.5);
}查看全部 -
扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉不同，rotate()函數(shù)只是旋轉，而不會改變元素的形狀。skew()函數(shù)不會旋轉，而只會改變元素的形狀。
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）查看全部 -
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非只讀狀態(tài)時的樣式。查看全部
-
“:read-only”偽類選擇器用來指定處于只讀狀態(tài)元素的樣式。簡單點理解就是，元素中設置了“readonly=’readonly’”查看全部 -
<p>“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網(wǎng)站文本是深藍的背景，白色的字體，</p>
查看全部 -
“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素查看全部
-
:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素查看全部
-
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。
倒數(shù)第幾個查看全部 -
:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元
nth-child(n)
“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時，選擇器將選擇不到任何匹配的元素。查看全部 -
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器，
ul>li:last-child{background:blue;}查看全部 -
first-child
“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，查看全部
舉報
0/150
提交
取消