.transform {
    position: relative;
    border: 1px dashed #ccc;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    .handle {
        cursor: pointer;
        position: absolute;
        height: 0.5em;
        width: 0.5em;
        background-color: #eee;
        z-index: 1;
    }

    .handle.active {
        background-color: yellow;
    }

    .top {
        top: -0.25em;
    }

    .bottom {
        bottom: -0.25em;
    }

    .left {
        left: -0.25em;
    }

    .right {
        right: -0.25em;
    }

    .horizontal {
        top: 50%;
        margin-top: -0.25em;
    }

    .vertical {
        left: 50%;
        margin-left: -0.25em;
    }
}