在特定角度上变换div

Question

我需要一条线，应该可以选择改变角度。变换特性工作良好，但当角度增大时，线宽减小。我需要保留线的大小，不应该受到影响。

https://jsfiddle.net/4j8n45zz/

​

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);
}

<div></div>

​

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>

​