圖片文字遮罩
? ? 設(shè)置文字不可見:overflow:hidden
????????/*定位使色塊在圖片正下方*/position: absolute;
/*色塊上移*/top: px;
間距用p標(biāo)簽的margin梢褐，而不直接給.pic_info用padding攀操，因為padding會改變盒子大小*/
變形
/*位移*/transform: translate（）
/*沿Z軸旋轉(zhuǎn)360度*/transform: rotate(360deg);
/*縮放*/transform: scale(0.5,0.2);}
/*斜切*//*transform: skew(45deg,0);*/transform: skew(0,45deg);}
元素旋轉(zhuǎn)
/*旋轉(zhuǎn)方向判斷1锌仅、X軸向右、Y軸向下穷缤、Z軸向屏幕外2、讓軸向?qū)χ约喊澹槙r針方向就是該軸向的旋轉(zhuǎn)方向*/
/*默認(rèn)沿Z軸旋轉(zhuǎn)*//*transform: rotate(45deg);*//*perspective設(shè)置透視距離互例，經(jīng)驗數(shù)值800比較符合人眼的透視效果*//*transform: perspective(800px) rotateX(45deg);*/transform: perspective(800px) rotateY(-45deg);
變形中心點(diǎn)
/*設(shè)置變形的中心點(diǎn)*/transform-origin: left center;
背面可見
/*設(shè)置盒子按3d空間顯示*/transform-style: preserve-3d;/*設(shè)置透視距離、三維旋轉(zhuǎn)的初始角度*/transform: perspective(800px) rotateY(0deg);/*設(shè)置盒子背面是否可見*/backface-visibility: hidden;
圖片翻轉(zhuǎn)
*初始文字翻轉(zhuǎn)这敬，鼠標(biāo)移入時才翻正顯示*/transform: translateZ(2px) rotateY(180deg);}/*鼠標(biāo)移入時圖片翻為背面隱藏*/.con:hover .pic{transform: perspective(800px) rotateY(180deg);}/*鼠標(biāo)移入時文字翻為正面顯示*/.con:hover .info{transform: perspective(800px) rotateY(0deg);
