CSS3 transform變換
1蚪黑、translate(x,y) 設(shè)置盒子位移
2、scale(x,y) 設(shè)置盒子縮放
3中剩、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4忌穿、skew(x-angle,y-angle) 設(shè)置盒子斜切
5、perspective 設(shè)置透視距離
6结啼、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7掠剑、translateX、translateY郊愧、translateZ 設(shè)置三維移動(dòng)
8朴译、rotateX、rotateY属铁、rotateZ 設(shè)置三維旋轉(zhuǎn)
9眠寿、scaleX、scaleY焦蘑、scaleZ 設(shè)置三維縮放
10盯拱、tranform-origin 設(shè)置變形的中心點(diǎn)
11、backface-visibility 設(shè)置盒子背面是否可見(jiàn)
默認(rèn)文字不可見(jiàn)：overflow:(hidden)
設(shè)置邊框：borer:1px solid #000（像素為1px的黑色邊框）
圖片文字遮罩
間距用p標(biāo)簽的margin。而不直接給.pic_info用pading狡逢，因?yàn)閜adding會(huì)改變盒子大小
比如：定位使色塊在圖片的正下方
position: absolute;
left: 0;
top: 300px;
transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
擴(kuò)展二級(jí)菜單
比如擴(kuò)展在右邊：
position: absolute;
left: 200px;
top: 0px;
transition: all 500ms cubic-bezier(0.470, -0.600, 0.475, 1.605);
變形
.box:hover{
transform: translate(50px,50px);（位移）
transform: rotate(360deg)宁舰；（沿Z軸旋轉(zhuǎn)360度）
transform: scale(0.5,0.2);（縮放）
transform: skew(0,45deg);（斜切）
}
元素旋轉(zhuǎn)
旋轉(zhuǎn)方向判斷：X軸向右、Y軸向下奢浑、Z軸向屏幕外 讓軸向?qū)χ约郝瑁槙r(shí)針?lè)较蚓褪窃撦S向的旋轉(zhuǎn)方向
設(shè)置盒子按3D空間顯示：
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
perspective設(shè)置透視距離，經(jīng)驗(yàn)數(shù)值800比較符合人眼的透視效果
默認(rèn)沿z軸旋轉(zhuǎn)：
.box:hover{rotateX(45deg);*/ transform: perspective(800px) rotateY(-45deg); }
設(shè)置變形的中心點(diǎn)
transform:left conter;（左中）left top（左上）50px 50px（以（50px雀彼，50px）為中心點(diǎn)）
背面可見(jiàn)
.box{
transform-style: preserve-3d;（設(shè)置盒子按3d空間顯示）
transform: perspective(800px) rotateY(0deg);（設(shè)置透視距離壤蚜、三維旋轉(zhuǎn)的初始角度）
backface-visibility: hidden;（設(shè)置盒子背面是否可見(jiàn)）
}
.con:hover .box{
transform: rotateY(180deg);
}
