鏡開き

unamochi_open.user.css

/* ==UserStyle==
@name           鏡開き
@namespace      hen.acho.co
@version        1.0.0
@description    ぱかー
@author         pacochi
==/UserStyle== */

.status__wrapper[aria-label$='unarist@mstdn.maud.io'] .account__avatar {
    /* 自分が見ているサーバのファイルにする */
    --una-mochi-bg: url('https://img.pawoo.net/cache/accounts/avatars/000/083/683/original/773acc2b2ad5a9db.png');
}

.status__wrapper[aria-label$='unarist@mstdn.maud.io'] .account__avatar::before,
.status__wrapper[aria-label$='unarist@mstdn.maud.io'] .account__avatar::after {
    content: '';
    background-image: var(--una-mochi-bg);
    display: block;
    position: absolute;
    top: 0px;
    width: 24px;
    height: 48px;
    background-size: 48px 48px;
}

.status__wrapper[aria-label$='unarist@mstdn.maud.io'] .account__avatar::before {
    left: 0px;
    transform-origin: left;
    animation: 1s linear 0s infinite open_mirror_l;
}

.status__wrapper[aria-label$='unarist@mstdn.maud.io'] .account__avatar::after {
    left: 24px;
    background-position: 24px 0px;
    transform-origin: right;
    animation: 1s linear 0s infinite open_mirror_r;
}

@keyframes open_mirror_l {
    from {
        transform: perspective(144px) rotateY(0deg);
    }
    to {
        transform: perspective(144px) rotateY(-90deg);
    }
}
@keyframes open_mirror_r {
    from {
        transform: perspective(144px) rotateY(0deg);
    }
    to {
        transform: perspective(144px) rotateY(90deg);
    }
}