html - 在特定 Angular 上变换 div

Question

我需要一条线，并且应该有一个改变 Angular 选项。 transform 属性效果很好，但是当 Angular 增加时，线的大小会减小。我需要保留线条大小，不应受到影响。

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> 的中间.所以如果你增加 Angular <div>将在中点旋转，并且您的线的一部分在站点之外。要解决此问题，您必须设置 transform-origin到一个 Angular 落 ( [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>