如何旋转渐变而不是整个 div？

Question

我在元素上有这个渐变，并且尝试仅旋转渐变，但是当我尝试旋转它时，正如您在代码片段中看到的那样，整个元素都在旋转。

有任何想法吗？

#test {
  transform: rotate(180deg);
  color: #d3d3d3;
  background-color: #003366;
  background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  I'm gonna be some buttons and stuff
</div>

Answer 1

您可以简单地使用 Degree 来linear-gradient旋转它。在这种情况下，您必须使用0deg（或to top），因为线性渐变的默认to bottom值为180deg

#test {
  color: #d3d3d3;
  background-color: #003366;
  background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<div id="test">
  I'm gonna be some buttons and stuff
</div>

正如您在文档中看到的，语法是：

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

在哪里

<angle>

渐变线的方向角。0deg 值相当于 top；从那里开始顺时针旋转增加值。