圖片文字遮罩

? ? 設(shè)置文字不可見(jiàn):overflow:hidden

????????/*定位使色塊在圖片正下方*/position: absolute;

/*色塊上移*/top: px;

間距用p標(biāo)簽的margin，而不直接給.pic_info用padding，因?yàn)閜adding會(huì)改變盒子大小*/

變形

/*位移*/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(shí)針?lè)较蚓褪窃撦S向的旋轉(zhuǎn)方向*/

/*默認(rèn)沿Z軸旋轉(zhuǎn)*//*transform: rotate(45deg);*//*perspective設(shè)置透視距離，經(jīng)驗(yàn)數(shù)值800比較符合人眼的透視效果*//*transform: perspective(800px) rotateX(45deg);*/transform: perspective(800px) rotateY(-45deg);

變形中心點(diǎn)

/*設(shè)置變形的中心點(diǎn)*/transform-origin: left center;

背面可見(jiàn)

/*設(shè)置盒子按3d空間顯示*/transform-style: preserve-3d;/*設(shè)置透視距離、三維旋轉(zhuǎn)的初始角度*/transform: perspective(800px) rotateY(0deg);/*設(shè)置盒子背面是否可見(jiàn)*/backface-visibility: hidden;

圖片翻轉(zhuǎn)

*初始文字翻轉(zhuǎn)，鼠標(biāo)移入時(shí)才翻正顯示*/transform: translateZ(2px) rotateY(180deg);}/*鼠標(biāo)移入時(shí)圖片翻為背面隱藏*/.con:hover .pic{transform: perspective(800px) rotateY(180deg);}/*鼠標(biāo)移入時(shí)文字翻為正面顯示*/.con:hover .info{transform: perspective(800px) rotateY(0deg);