index.css

.point {
    position: absolute;
    width: 10px;
    height: 10px;
    background: deepskyblue;;
}
.point-n {
    top: -4px;
    left: calc(50% - 9px);
    width: 18px;
    height: 8px;
    border-radius: 5px;
}
.point-e {
    right: -4px;
    top: calc(50% - 9px);
    height: 18px;
    width: 8px;
    border-radius: 5px;
}
.point-s {
    bottom: -4px;
    left: calc(50% - 9px);
    width: 18px;
    height: 8px;
    border-radius: 5px;
}
.point-w {
    left: -4px;
    top: calc(50% - 9px);
    height: 18px;
    width: 8px;
    border-radius: 5px;
}


.point-ne {
    top: -4px;
    right: -4px;
}
.point-se {
    bottom: -4px;
    right: -4px;
}
.point-sw {
    left: -4px;
    bottom: -4px;
}
.point-nw {
    left: -4px;
    top: -4px;
}


/*  rotate */
.rotate {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: grab;
    /* background-color: red; */
    /* display: none; */
}

.rotate .rotateImage {
    width: 100%;
    height: 100%;
    fill: transparent;
    text-align: center;
    fill: black;
}

/* .rotate .rotateImage:hover{
    fill: black;
} */


.rotate-nw {
  top: -30px;
  left: -30px;
}

.rotate-nw .rotateImage {
    transform: rotateZ(180deg)
}


.rotate-n {
  top: -50px;
  left: calc(50% - 10px);
}

.rotate-n .rotateImage {
  transform: rotateZ(-135deg)
}


.rotate-ne {
  top:-30px;
  right:-30px;
}

.rotate-ne .rotateImage {
    transform: rotateZ(-90deg)
}

.rotate-e {
  top: calc(50% - 10px);
  right:-50px;
}

.rotate-e .rotateImage {
  transform: rotateZ(-45deg)
}



.rotate-se {
  bottom: -30px;
  right:-30px;
}

.rotate-s {
  bottom: -50px;
  left: calc(50% - 10px);
}

.rotate-s .rotateImage {
  transform: rotateZ(45deg)
}

.rotate-sw {
  bottom: -30px;
  left:-30px;
}

.rotate-sw .rotateImage {
    transform: rotateZ(90deg)
}


.rotate-w {
  top: calc(50% - 10px);
  left:-50px;
}

.rotate-w .rotateImage {
  transform: rotateZ(135deg)
}


.rotateValueContainer {
  position: absolute;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  display: none;
}



.rotate-nw .rotateValueContainer {
  top: -30px;
  left: -30px;
  transform: rotateZ(-45deg);
}

.rotate-n .rotateValueContainer {
  top: -30px;
  left: calc(50% - 10px);
  transform: rotateZ(0deg);
}


.rotate-ne .rotateValueContainer {
  top: -30px;
  right: -30px;
  transform: rotateZ(45deg);
}

.rotate-e .rotateValueContainer {
  top: calc(50% - 10px);
  right: -30px;
  transform: rotateZ(90deg);
}


.rotate-se .rotateValueContainer {
  bottom: -30px;
  right: -30px;
  transform: rotateZ(135deg);
}

.rotate-s .rotateValueContainer {
  bottom: -30px;
  right: calc(50% - 10px);
  transform: rotateZ(180deg);
}

.rotate-sw .rotateValueContainer {
  bottom: -30px;
  left: -30px;
  transform: rotateZ(225deg);
}

.rotate-w .rotateValueContainer {
  top: calc(50% - 10px);
  left: -30px;
  transform: rotateZ(-90deg);
}

.rotateValue {
  width: 100%;
  height: 100%;
  text-align: center;
}

.roateUnit {
  position: absolute;
  width: 20%;
  height: 2px;
  top: -13px;
  right: -3px;
}