我正在尝试旋转图像，但是图像在枢轴点旋转

var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";
function createShape() {
var cOntainer= document.getElementById("container");
var outer = document.createElementNS(svgNS,"svg");
container.append(outer);
outer.id = "outer"
console.log(outer.id)
outer.style.background = "grey";
outer.style.height = "100px";
outer.style.width = "150px";
outer.style.left = "150px";
outer.style.top = "200px";
outer.style.position = "absolute";
var shape1 = document.createElementNS(svgNS,"rect");
outer.append(shape1);
shape1.style.width = "100%";
shape1.style.height = "50%";
shape1.style.fill = "orange";
var shape2 = document.createElementNS(svgNS,"rect");
outer.append(shape2);
shape2.style.width = "33.33%";
shape2.style.height = "100%";
shape2.style.fill = "orange";
}
window.Onload= createShape;
window.Onclick= rotate;
function rotate() {
var outer = document.getElementById("outer");
console.log(outer.style.background)
outer.style.transform = "rotate(90deg)";
}

.grid {
background-image: repeating-linear-gradient(0deg,transparent,transparent 49px,#88F 49px,#88F 50px),repeating-linear-gradient(-90deg,#88F 50px);
background-size: 50px 50px;
top: 8px;
height: 651px;
position: absolute;
width: 501px;
}
#left {
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}