图形

图片文字遮罩

transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
贝塞尔曲线  超出再缩回的弹性效果

间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小

overflow：hidden；默认文字不可见

变形

位移   transform: translate(50px,50px);

沿Z轴旋转360度    transform: rotate(360deg);

缩放   transform: scale(0.5,0.2);

斜切 transform: skew(0,45deg);

变形分为四种：translate（位移）、rotate（旋转）、scale（缩放）、skew（斜切）

元素旋转

旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向

设置盒子按3D空间显示

transform-style: preserve-3d;

默认沿Z轴旋转

transform: rotate(45deg);

perspective设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

变形中心点

设置变形的中心点

transform-origin: left center;

背面可见

设置盒子按3D空间显示

transform-style: preserve-3d;

设置透视距离、三维旋转的初始角度

transform: perspective(800px) rotateY(0deg);

设置盒子背面是否可见

backface-visibility: hidden;