rotating-squares.less

rotating-squares.less

.square(@size) {
    display: block;
    height: @size;
    width: @size;
    line-height: @size;
    text-align: center;
}

@desired-total-width: 100px;

.square {
    background: @black;
    float: left;
    margin: 0 10px 0 0;
}

#square-one {
    .square(@desired-total-width);
}

#square-two {
    @hypotenuse: sqrt(2 * pow(@desired-total-width, 2));
    @size: @hypotenuse / 2;
    .square(@size);

    @offset: ((@desired-total-width - @size) / 2);

    // This works! And it beats translating because that necessitates a new rotation axis.
    margin: @offset 0 0 @offset;

    // .transform(translate(@offset, @offset));

    // -webkit-transform-origin: center center;
    // transform-origin: center center;
    .transition(all, .5s);

    &:hover {
        // .transform(rotate(45deg) translate(@offset, @offset));
        .transform(rotate(45deg));
    }

    background: #888;
}