图片文字遮罩
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;
网友评论