Edit in JSFiddle

<div>SVG Attr transform Rotate</div>
<svg viewBox="-100 -100 600 500"
  width="800" height="100"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="1" class="bg" />
  <rect x='0' y='80' width='150' height='80' transform='' fill="black" opacity="0.3" />
  <rect x='0' y='80' width='150' height='80' transform='rotate(90 150 160)' fill="black" opacity="0.4" />
  <rect x='0' y='80' width='150' height='80' transform='rotate(90 150 160) rotate(90 150 80)' fill="black" opacity="0.7" />
</svg>
<div>DIV css transform Rotate</div>
<div class="viewBox">
  <div class="containBox bg">
    <div class="box origin"></div>
    <div class="box origin-end" style="transform: rotate(90deg); background: rgba(0,0,0,.4);"></div>
    <div class="box origin-end" style="transform: rotate(90deg) translate(0,-100%) rotate(90deg) translate(0, 100%); background: rgba(0,0,0,.7);"></div>
  </div>
</div>
<div>SVG css transform Rotate - transform-origin: left top</div>
<svg viewBox="-100 -100 600 500"
  width="800" height="100"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="1" class="bg" />
  <rect x='0' y='80' width='150' height='80' fill="black" opacity="0.2" class="origin" />
  <rect x='0' y='80' width='150' height='80' fill="green" opacity="0.4" class="origin" style="transform: rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="pink" opacity="0.6" class="origin" style="transform: rotate(90deg) translate(0, -100%)" />
  <rect x='0' y='80' width='150' height='80' fill="blue" opacity="0.8" class="origin" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="red" opacity="0.9" class="origin" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg) translate(0, 100%);" />
</svg>
<div>SVG css transform Rotate - transform-origin: center center</div>
<svg viewBox="-100 -100 600 500"
  width="800" height="100"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="1"  class="bg" />
  <rect x='0' y='80' width='150' height='80' fill="black" opacity="0.2" class="origin-center" />
  <rect x='0' y='80' width='150' height='80' fill="green" opacity="0.4" class="origin-center" style="transform: rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="pink" opacity="0.6" class="origin-center" style="transform: rotate(90deg) translate(0, -100%)" />
  <rect x='0' y='80' width='150' height='80' fill="blue" opacity="0.8" class="origin-center" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="red" opacity="0.9" class="origin-center" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg) translate(0, 100%);" />
</svg>
<div>SVG css transform Rotate - transform-origin: right bottom</div>
<svg viewBox="-100 -100 600 500"
  width="800" height="100"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="1" class="bg" />
  <rect x='0' y='80' width='150' height='80' fill="black" opacity="0.2" class="origin-end" />
  <rect x='0' y='80' width='150' height='80' fill="green" opacity="0.4" class="origin-end" style="transform: rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="pink" opacity="0.6" class="origin-end" style="transform: rotate(90deg) translate(0, -100%)" />
  <rect x='0' y='80' width='150' height='80' fill="blue" opacity="0.8" class="origin-end" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg)" />
  <rect x='0' y='80' width='150' height='80' fill="red" opacity="0.9" class="origin-end" style="transform: rotate(90deg) translate(0, -100%) rotate(90deg) translate(0, 100%);" />
</svg>

body {
  padding: 0;
  margin: 0;
  background-color: #ccc;
}
svg {
  padding: 0;
  margin: 0;
  border: 2px solid blue;
  background: #eee;
}
.viewBox {
  position: relative;
  margin: .2em 0;
  padding: 0;
  width: 800px;
  height: 100px;
  display: block;
  border: 2px solid blue;
  background: #eee;
}
.containBox {
  position: absolute;
  bottom: 0;
  left: 360px;
  width: 120px;
  height: 80px;
  border: 1px solid gray;
}
.bg {
  fill: #fff;
  background-color: #fff;
}
.box {
  position: absolute;
  top: 20px;
  left: 0;
  width: 30px;
  height: 15px;
  background: rgba(0,0,0,.3);
}
.origin {
  transform-origin: left top;
}
.origin-end {
  transform-origin: right bottom;
}
.origin-center {
  transform-origin: center center;
}