css day4.2

187 阅读1分钟

css2D变形transform变换 平移缩放旋转

平移
transform:translateX(1000px);
水平方向上移动1000px
transform:translate(200px);
一个数字表示X轴移动
transform:translate(200px 200px);
第一个数字表示X轴 第二个数字表示Y轴
transition:all 1s; 过渡
transform:translate(-50%);
百分比参考自己盒子的宽度

缩放
transform:scale(1.5);
比例扩大1.5 倍

旋转
transform:rotate(180deg);
deg是度数的意思
旋转参考点
transform-origin:20px 30px;

倾斜
transform:skew(45deg,45deg);
第一位是水平倾斜 第二位是Y轴倾斜