Question

如何获取css旋转文本以在Chrome中正确呈现？在Firefox中它看起来是可以接受的。

删除阴影并不能解决问题，我也试图在没有运气的情况下调整转换起源。

在高分辨率屏幕上，它看起来也很好。

 .discount-trap {
   border-bottom: 33px solid #74c331;
   border-left: 33px solid transparent;
   border-right: 33px solid transparent;
   height: 0px;
   width: 150px;
   -webkit-transform: rotate(-315deg);
   -moz-transform: rotate(-315deg);
   -ms-transform: rotate(-315deg);
   -o-transform: rotate(-315deg);
   transform: rotate(-315deg);
   text-align: center;
   position: absolute;
   top: 25px;
   color: white;
   text-shadow: 0px 1px 2px black;
 }
 .discount-trap__header {
   font-size: 14px;
   margin-top: 2px;
 }
 .discount-trap__text {
   font-size: 10px;
 }

<div style="position: relative;">
  <div class="discount-trap" style="display: block;">
    <div class="discount-trap__header">Save 15%</div>
    <div class="discount-trap__text">Stay in Jul/Aug</div>
  </div>
</div>

Fiddle

更新

看起来多个选项都有效，但没有一个能像Firefox一样流畅，但这正是Chrome问题。选项1：添加到.discount-trap -webkit-backface-visibility：hidden;

选项2：添加到-webkit-transform：rotate（-315deg）;所以它变成-webkit-transform：rotate（-315deg）translate3d（0,0,0）;

Answer 1

Chrome默认情况下不启用消除锯齿功能。但是您可以将此CSS属性添加到元素中以启用它：

-webkit-backface-visibility: hidden;

Fiddle

Answer 2

您缺少转换来源<Row> <Key android:codes="97" android:keyLabel="a" android:horizontalGap="5%p" android:keyEdgeFlags="left"/> <Key android:codes="115" android:keyLabel="s"/> <Key android:codes="100" android:keyLabel="d"/> <Key android:codes="102" android:keyLabel="f"/> <Key android:codes="103" android:keyLabel="g"/> <Key android:codes="104" android:keyLabel="h"/> <Key android:codes="106" android:keyLabel="j"/> <Key android:codes="107" android:keyLabel="k"/> <Key android:codes="108" android:keyLabel="l"/> <Key android:codes="66" android:keyIcon="@drawable/enter_key" android:keyWidth="22%p" android:isRepeatable="true" android:keyEdgeFlags="right"/> </Row>

将其添加到-webkit-transform-origin: 50% 50%;

然后弄乱.discount-trap

的宽度

在Webkit浏览器的宽度效果变换渲染上由于某种原因，因此要去除它并对齐你的字母，你需要弄乱它，直到它按照你想要的方式呈现。

同时设置行高以阻止你的字母＆amp;数字来自于跳舞。

e.g。 .discount-trap

Answer 3

你添加了translate3d属性，它将呈现文字而不会模糊......

.discount-trap {
border-bottom: 33px solid #74c331;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  height: 0px;
  width: 150px;
  -webkit-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -moz-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -ms-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -o-transform: rotate(-315deg) translate3d( 0, 0, 0);
  transform: rotate(-315deg) translate3d( 0, 0, 0);
  text-align: center;
  position: absolute;
  top: 25px;
  color: white;
  text-shadow: 0px 1px 2px black;
}

Css旋转文本是锯齿状的

3 个答案: