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

最新推荐文章于 2023-01-17 17:01:04 发布

weixin_41020353

最新推荐文章于 2023-01-17 17:01:04 发布

阅读量443

点赞数

分类专栏： web前端 JavaScript 互联网文章标签： css html css3 less

本文链接：https://blog.csdn.net/weixin_41020353/article/details/105233214

版权

web前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

互联网

7 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

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

首先来看html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="grid">
        <div class="item top left"></div>
        <div class="item bottom left"></div>
        <div class="item bottom right"></div>
        <div class="item top right"></div>
        <div class="item center"></div>
    </div>
    <script src="./dist/bundle.js"></script>
</body>
</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)
    }
}