.tippy-box[data-animation=perspective][data-placement^=top] {
    transform-origin: bottom
}

    .tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] {
        transform: perspective(700px) translateY(8px) rotateX(60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=bottom] {
    transform-origin: top
}

    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
        transform: perspective(700px) translateY(-8px) rotateX(-60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=left] {
    transform-origin: right
}

    .tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] {
        transform: perspective(700px) translateX(8px) rotateY(-60deg)
    }

.tippy-box[data-animation=perspective][data-placement^=right] {
    transform-origin: left
}

    .tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] {
        transform: perspective(700px)
    }

    .tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
        transform: perspective(700px) translateX(-8px) rotateY(60deg)
    }

.tippy-box[data-animation=perspective][data-state=hidden] {
    opacity: 0
}