Question

我创建了一个类，我试图在CSS中旋转45度，但Chrome说“无效的属性值”

.cr {
    background-color: #444;
    position: absolute;
    left: 5px;
    top: 13.5px;
    width: 20px;
    height: 3px;
   -o-webkit-transform: rotate(45deg);
      -o-moz-transform: rotate(45deg);
       -o-ms-transform: rotate(45);
             transform: rotate(45deg);
}

<div class="cr"></div>

为什么会这样？

Answer 1

您不需要o-webkit o代表Opera，webkit是Chrome背后的引擎。

只是-webkit-transform: rotate(45deg);

与moz前缀相同。

Answer 2

正确

/* Transform */
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);

查看caniuse.com哪些浏览器需要哪些前缀或使用http://prefixmycss.com/等服务。

在caniuse.com上点击“全部显示”，查看超过最近几个版本的内容。您可能希望保留Opera前缀，尽管在最近的版本中不需要它，但版本12仍然非常受欢迎需要它们。

更好的是像grunt这样的自动化工具，但这个问题超出了这个范围。

CSS旋转的属性值无效

2 个答案: