Question

我有这个用于打开/关闭属性项的三角形的CSS，当我点击三角形时我应用“is-active”类并且三角形从指向左边转到顺时针方向指向下方（在IE，FireFox，Safari中正常工作），但在最新版本的Chrome中逆时针旋转，现在从我所读到的它应该只是逆时针方向，如果数字是负数rotate（）值。

任何想法或之前有人见过这个想法吗？

<html>
<head>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style>
 body {
    font-family: arial,verdana, sans-serif;
    font-size: 12px;
}
.accordion-trigger:before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  -webkit-transform: rotate(360deg);
  border-width: 5px 10px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #666666;  
  border-right-width: 0;
  margin-right: 0.5em;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -ms-transform: rotate(0);
  transform: rotate(0);

}
 .accordion-trigger.is-active:before {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);  
  border-left-color: Black;
}
 .container 
 {
    background-color: #e6e6e6;
    height: 18px;
    width: 100px;
    padding: 8px 0px 0px 8px;
    border: 1px solid #999999;
    -webkit-border: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;     
 }
</style>
</head>
<body>

<div class="container">
    <div class="accordion-trigger" onclick="Rotate(this)"></div>        
</div>

<script>

function Rotate(entity) {
     $(entity).toggleClass("is-active");
}

</script>
</body>
</html>

Answer 1

您在CSS上遇到问题：您在设置0的{{1}}个浏览器以外的所有浏览器中设置为-webkit-的开始位置：

选中此Fiddle Demo

谷歌浏览器逆时针旋转但应顺时针旋转

1 个答案: