CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

需求背景

使用 vue 做的项目，业务需求有一个拼图效果，默认是深色的背景图，上面分五个区域，每次会亮一个区域，整张图都亮，拼图完成。先来看一下最终的效果图。

应用到的知识点：

实现思路：

外层大盒子用来放暗色背景图，里面的5块拼图，是5个div，每块拼图都使用背景定位的方式展示背景图的固定区域，中间的拼图做了旋转。但是旋转后，又遇到了个问题：背景图片也跟着旋转了，像下面这样：

解决背景旋转的思路：可以在第5块拼图的外层套一个盒子，将外层盒子向右旋转45度，再将背景的元素向左旋转45度。操作完又发现了新的问题，下面图中的黑色边框是外层盒子（为了方便看，把其他的拼图块都设置为不可见）。如果给外层盒子设置 overflow:hidden ，那么中间拼图的上下左右四个角都会缺失。

我们需要把第五块拼图的宽高设置大一些，再设置它外层的盒子 overflow:hidden。宽高设置大的话，对应的 background-size 也要改变。

最后，就可以实现刚开始的效果了，完整的 vue 代码如下：

<template>    <ction class="box">        <div class="bg" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        <div v-if="item1show" class="item item1" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        <div v-if="item2show" class="item item2" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        <div v-if="item3show" class="item item3" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        <div v-if="item4show" class="item item4" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        <div v-if="item5show" class="item item5wrap">            <div class="item5" :style="{ backgroundimage: `url(${bgimg}) ` }"></div>        </div>    </ction></template><script>import bgimg from "@/asts/bg.jpeg";export default {    data() {        return {            bgimg,            item1show: fal,            item2show: true,            item3show: true,            item4show: true,            item5show: true        };    }};</script><style lang="less">@bordercolor: #333;.box {    margin: 0px auto;    width: 300px森林资源;    height: 200px;    background-color: #000;    position: relative;    .bg {        width: 100%;        height: 100%;        position: absolute;        left: 0;        top: 0;        background-position: center center;        background-repeat: no-repeat;        background-size: 100% 100%; 音乐DJ       opacity: 0.5;    }    .item {        width: 50%;        height: 50%;        box-sizing: border-box;        background-size: 200% 200%;        border-right: 1px solid @bordercolor;        border-bottom: 1px solid @bordercolor;        position: absolute;    }    .item1 {        background-position: 0 0;        left: 0;        top: 0;    }    .item2 {        background-position: 100% 0;        left: 50%;        top: 0;    }    .item3 {        background-position: 0 100%;        left: 0;        top: 50%;    }    .item4 {        background-position: 100% 100%;        left: 50%;        top: 50%;    }  华山是哪个省  .item5wrap {        width: 100px;        height: 100px;        border-left: 1px solid @bordercolor;        borde中位数和众数r-top: 1px solid @bordercolo上火嗓子疼吃什么药r;        transform: rotate(45deg);        left: 50%;        top: 50%;                    transform: translate(-50%, -50%) rotate(45deg);        overflow: hidden;        .item5 {            width: 150px;            height: 150px;            background-position: 50% 50%;            background-size: 200% 133%;            position: absolute;            left: 50%;            top: 50%;            transform: translate(-50%, -50%) rotate(-45deg);        }    }}</style>

到此这篇关于css3 菱形拼图实现只旋转div 背景图片不旋转功能的文章就介绍到这了,更多相关css3旋转图片内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！