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

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

.ear.right{

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

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2020-04-06 21:28:22

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

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

例如

http://img1.sycdn.imooc.com//climg/5e8b2e260927643d10240717.jpg

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

http://img1.sycdn.imooc.com//climg/5e8b2e39099994a401050108.jpg

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

http://img1.sycdn.imooc.com//climg/5e8b2e4b09746d0b07600097.jpg

http://img1.sycdn.imooc.com//climg/5e8b2e55096c9c1200950333.jpg

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

http://img1.sycdn.imooc.com//climg/5e8b2e64091d2fe301450309.jpg

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

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

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师