どうやって適応的な画像センター回転機能を実現しますか?

どうやって適応的な画像センター回転機能を実現しますか?
まず見にきます.

きなdivが5つの さいdivを んでいるのが えます. の は つの の で5つの に けられています.それぞれ 、 、 、 と で、 にパッケージされたファイルを します.
コンパイルされていないscssを てください.

body {
    background: #111;
}
.grid {
    transform-style: preserve-3d;
    perspective: 400px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 80vmin;
    height: 80vmin;
    transform: translate(calc(50vw - 40vmin), calc(50vh - 40vmin));
}

.item {
    background: url(‘    ’);
    background-size: 80vmin;
}

.top.left {
    grid-area: 1 / 1 / 5 / 2;
}

.bottom.left {
    grid-area: 5 / 1 / 6 / 5;
}

.bottom.right {
    grid-area: 2 / 5 / 6 / 6;
}
.top.right {
    grid-area: 1 / 2 / 2 / 6;
}

.center {
    grid-area: 2 / 2 / 5 / 5;
}

.top {
    background-position-y: top;
}

.right {
    background-position-x: right;
}

.bottom {
    background-position-y: bottom;
}

.left {
    background-position-x: left;
}

.center {
    background-position: center;
    animation: wobble 2s ease-in-out infinite;
}

@keyframes wobble {
    10% {
        transform: rotateY(0turn);
    }
    50% {
        transform: rotateY(0turn) scale(0.5);
    }
    100% {
        transform: rotateY(1turn)
    }
}

gridレイアウトを っています.translate-styleなどの は にネット で する を できます. つ つ しないで、 にアニメーション を して、 にします.
は の りです
ソースが なら、 の とキーワードの に してください.