关闭

使用transform的scale缩放的写法误区

标签: transform的scale用法
4395人阅读 评论(1) 收藏 举报
分类:


聊一聊本人发现的使用transform的scale缩放属性的写法误区


在使用对块级元素(非块级元素无transform属性)transform: scale(.88);   时,

由于自身宽高都会缩小,原本使用left: 0; 

看上去会显得像 left: 20px; 或者更大,


所以我就按部就班,使用

transform: scale(.88)  translateX(-20px) ;

或者直接 left: -20px;


然而这样的写法又很不好用,因为在移动设备中,宽度不一,有320px宽屏也有414px甚至更宽的屏幕

所以20px这个值又显得不准确。。。。。。。。


知道这样的BUG我很痛苦,给他用了@media screen的方式给了五个断点,虽然和谐了一点,但是终归是存在BUG


直到后来,突然茅塞顿开,反应过来还有个变形中心transform-origin属性

加上transform-origin: left;   之前遇到的一切问题就这样轻松的解决了

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。 一.旋转 rotate 用法:transform: rot...
  • MOONCOM
  • MOONCOM
  • 2017-01-17 14:26
  • 2724

chrome 不支持12px以下字体为题的解决(使用-webkit-transform:scale(0.75))

发现英文9px 设置 在chrome 下无效,可以通过      -webkit-transform: scale(0.75);  12*0.75 =9  得到小字体 http://www.c...
  • ISaiSai
  • ISaiSai
  • 2014-12-16 14:31
  • 3792

JS中元素动画效果Transform属性

1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。 transfo...
  • xiaokangmiclong
  • xiaokangmiclong
  • 2016-01-27 09:40
  • 9060

css3 transition transform属性造成文字抖动

现象:信息栏第一行文字,最后总会抖动
  • u011088792
  • u011088792
  • 2017-07-31 10:05
  • 1202

transform: scale() 图片文字模糊的原因

今天做一个刮刮乐H5应用的时候,用到了个简单的 CSS 动画效果,就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口,以及按钮重复变大变小的动画,结果遇到个很郁闷的问题,按钮和...
  • zsjangel
  • zsjangel
  • 2017-12-25 17:02
  • 236

优化transform在过渡效果中出现文字模糊和抖动问题

最近在项目提交后测试部门反馈这样的问题,下拉菜单在过渡效果中出现文字模糊和抖动。调试过程中发现除IE 11和FireFox 54下没有出现该问题,但在Chrome下出现上述问题。
  • weixin_38414352
  • weixin_38414352
  • 2017-08-11 17:05
  • 997

css3使用transform出现字体模糊的解决办法

这个问题很奇葩,话不多少直接上代码:.g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transfor...
  • u014520745
  • u014520745
  • 2017-08-25 16:06
  • 987

---Transform---放大缩小旋转

self.delta -= 20.0;     // CGAffineTransformMakeTranslation的位移形变是相对按钮"初始"位置来变化的     self.icon...
  • iotjin
  • iotjin
  • 2015-11-25 22:05
  • 766

python 图像的形变, 旋转与缩放 (transform) (1)

http://blog.csdn.net/denny2015/article/details/50532971 图像的形变与缩放,使用的是skimage的transform模块,...
  • wuguangbin1230
  • wuguangbin1230
  • 2017-05-03 09:49
  • 2298

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45...
  • er_ba
  • er_ba
  • 2015-07-26 00:07
  • 6475
    个人资料
    • 访问:100128次
    • 积分:1324
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:35篇
    • 译文:0篇
    • 评论:7条