Question

我有一个嵌套在标记中的内嵌元素（<h1>）。我将转换属性应用于h1（倾斜使其看起来像平行四边形）。
我需要将span标记转换为＆＃34; unskew＆＃34;它和它的文字。但这似乎只适用于IE。

以下是HTML和CSS的an example：

＆＃13;

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  transform: skew(15deg);
}

＆＃13;

<h1><span>This is a Title</span></h1>

＆＃13;

Answer 1

<强>解释
是内联元素，转换属性不适用于内联元素。
CSS变换模块级别1上的List of transformable elements 。

<强>解决方案：
将范围的显示属性设置为inline-block或block。这将允许您将变换应用于span元素它也适用于其他内联元素，例如<a>  ...（请参阅list of inline elements on MDN）。

以下是元素的演示：

＆＃13;

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}

＆＃13;

<h1><span>This is a Title</span></h1>

＆＃13;

Answer 2

这里有点晚了，但你可以设置

@Configuration
@Ena1bleCaching
public class MyApp extends SpringBootServletInitializer  implements CachingConfigurer {

  @Override
  public CacheErrorHandler errorHandler() {

    return MyAppCacheErrorHandler();
  }

}

然后正常使用CSS3转换属性。

如何在跨度上使用CSS3变换？

2 个答案: