老师,这个是什么意思啊?scale(-1,1) 翻转

来源:2-1 汉克狗头部轮廓和耳朵

qq_慕粉6009927

2020-04-06 17:27:26

.ear.right{

transform:scale(-1,1) translate(-26px,0) rotate(10deg);

}


写回答

1回答

好帮手慕星星

2020-04-06

同学你好,scale(-1,1) 可以实现翻转。解答如下:

scale(x,y) 可以理解为x是元素左右边线到元素中心点的距离,y是元素上下边线到元素中心点的距离。x值越大元素的左边线越靠左,右边线越靠右;x值为0时,左边线和右边线会重合;x值为负数时,元素的左边线会移到元素中心点的右侧,右边线会移到元素中心点的左侧,这样就水平翻转了。

例如

http://img.mukewang.com/climg/5e8b2e260927643d10240717.jpg

当设置缩放为1时,图形正常显示

http://img.mukewang.com/climg/5e8b2e39099994a401050108.jpg

你可以把第一个值一点一点把值改小,例如0.8, 0.5, 0.1,形状慢慢缩小

http://img.mukewang.com/climg/5e8b2e4b09746d0b07600097.jpg

http://img.mukewang.com/climg/5e8b2e55096c9c1200950333.jpg

当等于0时,图片就缩放没了,然后你再一点一点设置成负值,例如-0.1,-0.5,-0.8

http://img.mukewang.com/climg/5e8b2e64091d2fe301450309.jpg

就会发现图形从反方向慢慢放大,等设置成-1之后,整个图形就显示正常,所以也实现了翻转的效果哦。

自己再测试理解下,祝学习愉快!

1

0 学习 · 40143 问题

查看课程