XenForo Avatar animation on hovering

[CR LEAKS]

In extra.less:

@background_color_1: #185886;

.message-avatar-wrapper {
    a {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}
.avatarWrapper {
    .avatar {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}
.memberTooltip-avatar {
    a {
        position: relative;
        transition: 2s;
        padding: 3px;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            transform: rotateX(90deg);
            z-index: -1;
        }
        &:after {
            transform: rotateY(90deg);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @background_color_1;
            transition: 2s;
            z-index: -1;
        }
        &:hover {
            &:before {
                transform: rotateX(0deg);
            }
            &:after {
                transform: rotateY(0deg);
            }
            z-index: 0;
        }
    }
}