@ font-face和-webkit-transform:rotate,不起作用

Fre*_*Die 1 css webkit css3 font-face

我正在建立一个HTML5和CSS3功能的网站.我有两个通过@ font-face添加的自定义字体.它们用于徽标.它们是'h1'标签,我用CSS3 proporety旋转它们:

transform: rotate(350deg);
Run Code Online (Sandbox Code Playgroud)

当然,对于每一个浏览器我用适当的前缀(IE: "-ms-",为FF: "-moz-",为Chrome/Safari浏览器: "-webkit-" 和歌剧 "-O-").问题是它不能在Chrome和Safari中旋转.所以我的问题是,Webkit引擎是否允许使用CSS3属性旋转自定义字体?

Mic*_*any 13

大多数内联内容不支持webkit浏览器中的转换 - 这是一个已知的限制.虽然H1是一个块级标签,但我的猜测是你在实际文本周围的H1标签内使用了一个span标签(内联)来添加字体,这给你带来了麻烦.

添加"display:inline-block",看看是否有帮助.