如何实现自适应的图片中心旋转功能？

如何实现一个自适应的图片中心旋转功能？

首先来看html结构

可以看到有一个大的div包裹着5个小的div，设计思路就是一个容器里面分为五部分，分别是左上，左下，右下，右上以及中间，最后引入打包好的bundle文件（编译好的scss）

再看未编译的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等作用可以直接在网上查找相对应的功能，不一一说明，最后定义了一个动画效果，使其生效

效果如下：

如需源码请关注新传小组长回复翻转关键字