Question

我需要一条线，并且应该有一个更改角度的选项。变换属性运行良好，但是当角度增加时，线条尺寸减小。我需要保留行大小，不应受到影响。

＆＃13;

div {
  width: 5px;
  height: 220px;
  background-color: yellow;
  /* Rotate div */
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

＆＃13;

<div></div>

＆＃13;

Answer 1

转换的默认transform-origin设置在<div>的中间位置。因此，如果增加角度，<div>将在中点旋转，并且线的一部分位于站点之外。要解决此问题，您必须将transform-origin设置为角落（[top, bottom] [right, left]）。

请参阅以下示例（https://jsfiddle.net/4j8n45zz/1/）：

div {
  display:block;
  width:5px;
  height: 220px;
  background-color: yellow;
  /* Rotate div */
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
}

<div></div>

在特定角度上转换div

1 个答案: