图片文字遮罩
设置文字不可见:overflow:hidden
/*定位使色块在图片正下方*/position: absolute;
/*色块上移*/top: px;
间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
变形
/*位移*/transform: translate（）
/*沿Z轴旋转360度*/transform: rotate(360deg);
/*缩放*/transform: scale(0.5,0.2);}
/*斜切*//*transform: skew(45deg,0);*/transform: skew(0,45deg);}
元素旋转
/*旋转方向判断1、X轴向右、Y轴向下、Z轴向屏幕外2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
/*默认沿Z轴旋转*//*transform: rotate(45deg);*//*perspective设置透视距离，经验数值800比较符合人眼的透视效果*//*transform: perspective(800px) rotateX(45deg);*/transform: perspective(800px) rotateY(-45deg);
变形中心点
/*设置变形的中心点*/transform-origin: left center;
背面可见
/*设置盒子按3d空间显示*/transform-style: preserve-3d;/*设置透视距离、三维旋转的初始角度*/transform: perspective(800px) rotateY(0deg);/*设置盒子背面是否可见*/backface-visibility: hidden;
图片翻转
*初始文字翻转，鼠标移入时才翻正显示*/transform: translateZ(2px) rotateY(180deg);}/*鼠标移入时图片翻为背面隐藏*/.con:hover .pic{transform: perspective(800px) rotateY(180deg);}/*鼠标移入时文字翻为正面显示*/.con:hover .info{transform: perspective(800px) rotateY(0deg);
