变换的起点:transform-origin

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

这个变换的起点一开始可能有点难理解,不过用了过渡动画,再加上页面上显示的这个尺子,就比较容易理解了 ... 设置变换起点的属性是 transform-origin .. 现在它的值是 right bottom ..

right 是 x 轴的值,它表示的值是 100% .. 对这个这个图像元素来说,就是它的最右边的这个边儿的某一个点 .. 这里 y 轴的值我们也用了一个关键词,就是这个 bottom ... 它表示的值也是 100% .. 对于这个图像元素,它表示的就是图像最底下这个边儿上的某个位置 ..

x 跟 y 交叉的地方就是变换的起点 .. x 轴的最右边 .. ,y 轴的最下边... 交叉的地方就是右下角这个点 ..

把这个起点变成右上角,可以用一个 right top ...

现在我想使用一个具体的值 .. 先要关掉这个 Ruler .. 然后打开参考线 ... 调整一下页面上显示的这两条参考线 ..

水平的参考线就相当于是 x 轴, 垂直的参考线相当于是 y 轴 .. 现在我想用它们俩的交叉点作为变换的起点 ..

这样我们应该把 x 轴的值设置成 right .. 或者 100% ... y 轴的我们用一个具体的值, 这一小块的高度大概是 50px ... 把 y 轴的值设置成 50px ..

再用动画显示一下这个变换 .. 你会发现,这个变换的 origin ,就是页面上两条参考线交叉的地方 ..

再调整一下这两条参考线的交叉点 ... 现在我们要设置的 origin 的值, x 大概是 50px .. y 大概也是 50px ...

再看一下这个变换的动画 ... 现在这个图像大概就会使用我们设置的 origin 去做旋转变换 ...

变换的起点:transform-origin《 CSS:变换 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点