CSS：翻译值不起作用

【问题标题】：css: translate value is not workingCSS：翻译值不起作用
【发布时间】：2018-01-27 03:29:16
【问题描述】：

.arrow 中的翻译值在这里似乎没有任何作用。谁能解释一下为什么

<!doctype html>
<html>
<head>
<style>
.container{
    height:500px;
    width:600px;
}
.header{ height:40px; }
.step{width:194px;float:left; border:1px solid black; height:40px;}

.arrow{display:inline-block;width:25px; height:25px; border-left:1px solid 
 black; border-bottom: 1px solid black;-webkit-transform:translateY(20px); 
 transform:rotate(-135deg);  }

</style>
</head>
<body>
<div class='container'>
    <div class='header'>
      <div class='step'> step 1 <div class='arrow'> </div></div>
      <div class='step'> step 2 <div class='arrow'> </div></div>
      <div class='step'> step 3 <div class='arrow'> </div></div>
    <div class='body'> </div>
</div>

【问题讨论】：

Transform scale property not working in Chrome & Safari的可能重复

标签： html css

【解决方案1】：

您应该将两个值添加到同一个transform 属性中，例如transform: translateY(20px) rotate(-135deg)，否则由于CSS 级联规则，将只考虑最后一个值：

.container {
  height: 500px;
  width: 600px;
}

.header {
  height: 40px;
}

.step {
  width: 194px;
  float: left;
  border: 1px solid;
  height: 40px;
}

.arrow {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-left: 1px solid;
  border-bottom: 1px solid;
  transform: translateY(20px) rotate(-135deg);
}

<div class='container'>
  <div class='header'>
    <div class='step'> step 1 <div class='arrow'> </div></div>
    <div class='step'> step 2 <div class='arrow'> </div></div>
    <div class='step'> step 3 <div class='arrow'> </div></div>
  <div class='body'></div>
</div>

【讨论】：