user1050619 user1050619 - 2 months ago 10
CSS Question

Transform div over a particular angle

I need a line and should have an option to change the angle. The transform property works well but when the angle is increased the line size is decreased.
I need to retain the line size and should not be affected.

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

The default transform-origin of the transformation is set on the middle of your <div>. So if you increase the angle the <div> will be rotate on the mid point and a part of your line is outside the site. To solve this you have to set the transform-origin to a corner ([top, bottom] [right, left]).

See the following example (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>