html, body {

    width: 100%;

    height: 100%;

}

​

body {

    display: flex;

}

​

p {

    position: absolute;

    top: 20px;

    left: 20px;

}

​

.g-container {

    display: flex;

    margin: auto;

    width: 400px;

    height: 100px;

}

​

.g-wrap {

    position: relative;

    margin: auto;

    width: 100px;

    height: 100px;

    border: 1px dashed #000;

    box-sizing: border-box;

}

​

.g-flag {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 0;

    background: rgba(0, 0, 0, .15);

    transition: 0 .2s;

}

​

.g-box {

    width: 100%;

    height: 100%;

    background-color: #000;

    cursor: grab;

    color: #fff;

    text-align: center;

    line-height: 100px;

    font-size: 48px;

}

​

.g-wrap:active .g-flag {

    width: 100%;

    height: 100%;

}

​

@for $i from 1 to 5 {

    .g-wrap:nth-child(#{$i}) .g-box {

        transform: 

            rotate(#{random(180)}deg)

            translate(#{random(400) - 150}px, #{random(100) + 60}px);

    }

}

​

.g-box {

    transition: 99999s 999999s;

}

.g-flag:hover + .g-box {

    transform: translate(0, 0);

    transition: 0s;

}