windom201903-azimuthal-rotation

#buttonccwwindom201903 {
position: relative;
z-index: 10;
top: 20px;
left: 220px;
}
#buttoncwwindom201903 {
position: relative;
z-index: 10;
top: -60px;
left: 450px;
}
#labelwindom201903 {
position: relative;
top: -30px;
left: 365px;
text-align: center;
display: inline-block;
width: 50px;
}
/*
#titlewindom201903 {
display: inline-block;
position: absolute;
left: 100px;
top: 250px;
}
*/
#containerwindom201903 {
position: absolute;
z-index: 0;
width: 800px;
height: 800px;
background-image: url(“https://wcares.org/wp-content/uploads/2019/03/AzimuthalMap_Franklin_w_Windom_EZNEC_crop2_map_only.png”);
}
#imagewindom201903 {
clip-path: circle(400px at center);

transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
}
#imagewindom201903.rotate10 {
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate20 {
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate30 {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate40 {
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate50 {
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate60 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate70 {
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-ms-transform: rotate(70deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate80 {
transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate90 {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate100 {
transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-ms-transform: rotate(100deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate110 {
transform: rotate(110deg);
-webkit-transform: rotate(110deg);
-ms-transform: rotate(110deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate120 {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate130 {
transform: rotate(130deg);
-webkit-transform: rotate(130deg);
-ms-transform: rotate(130deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate140 {
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
-ms-transform: rotate(140deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate150 {
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate160 {
transform: rotate(160deg);
-webkit-transform: rotate(160deg);
-ms-transform: rotate(160deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate170 {
transform: rotate(170deg);
-webkit-transform: rotate(170deg);
-ms-transform: rotate(170deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate180 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate190 {
transform: rotate(190deg);
-webkit-transform: rotate(190deg);
-ms-transform: rotate(190deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate200 {
transform: rotate(200deg);
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate210 {
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate220 {
transform: rotate(220deg);
-webkit-transform: rotate(220deg);
-ms-transform: rotate(220deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate230 {
transform: rotate(230deg);
-webkit-transform: rotate(230deg);
-ms-transform: rotate(230deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate240 {
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate250 {
transform: rotate(250deg);
-webkit-transform: rotate(250deg);
-ms-transform: rotate(250deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate260 {
transform: rotate(260deg);
-webkit-transform: rotate(260deg);
-ms-transform: rotate(260deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate270 {
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate280 {
transform: rotate(280deg);
-webkit-transform: rotate(280deg);
-ms-transform: rotate(280deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate290 {
transform: rotate(290deg);
-webkit-transform: rotate(290deg);
-ms-transform: rotate(290deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate300 {
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);

/* clip-path: inset(10px 20px 30px 40px); */
transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate310 {
transform: rotate(310deg);
-webkit-transform: rotate(310deg);
-ms-transform: rotate(310deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate320 {
transform: rotate(320deg);
-webkit-transform: rotate(320deg);
-ms-transform: rotate(320deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate330 {
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate340 {
transform: rotate(340deg);
-webkit-transform: rotate(340deg);
-ms-transform: rotate(340deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}
#imagewindom201903.rotate350 {
transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-ms-transform: rotate(350deg);

transform-origin: 400px 400px;
-webkit-transform-origin: 400px 400px;
-ms-transform-origin: 400px 400px;
}

 

A simple demo allowing the original plots of Ted’s Windom antenna to be rotated over the azimuthal map centered on Franklin, TN. Use the -10 and +10 buttons to rotate the Windom EZNEC plot. Map from http://ns6t.net and the plots from Ted, W3TB created with EZNEC.
– 10 degrees
  0
+ 10 degrees