图形

作者: 星河入怀fd | 来源:发表于2019-06-05 08:54 被阅读0次

图片文字遮罩

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;

相关文章

网友评论

      本文标题:图形

      本文链接:https://www.haomeiwen.com/subject/tatjxctx.html