当前位置:
  1. 首页 »
  2. 标签:transform
共 2 篇

css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时,暂时用旋转减少抖动

在使用css3 transform:scale(1.2)时遇到一个问题,就是发现文本会抖动。大概就时文本会先变模糊、再变清晰。 经过测试,可以通过旋转来减少抖动的感觉。添加了rotate(0.1deg)后,文本变模糊,但不会再变回清晰。 我使用的场景,鼠标经过时,li放大一些以区分其他列表上的li。 CSS: transform: scale(1) translateZ(0) rotate(0deg);//鼠标未经过 transform: scale(1.01) translateZ(0) rotate(0.1deg);//鼠标经过 /***动画时间***/ -webkit-transit
笔记 2,152

CSS transform位移属性的小技巧

transform,大多时候都是用来做层旋转,其实很多时候也可以用来垂直和水平的位移,比如要写图片居中,习惯性的定义父层的text-align:center;有时候对于图片,不是很好用,图文混合,文字需要居左对齐,图片需要居中对齐,这个时候可以配合transform:translateX(-50%);来实现图片居中 在第二个图片上,添加了一个transform类,CSS如下 .transform{ margin-left:50%; transform:translateX(-50%); } 所以,在配合居中上,就可以很好的使用!
教程 2,824