Web知识:CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景
使用 vue 做的项目，业务需求有一个拼图效果，默认是深色的背景图，上面分五个区域，每次会亮一个区域，整张图都亮，拼图完成。先来看一下最终的效果图。
应用到的知识点：
- background-size
- background-position
- transform：rotate
实现思路：
外层大盒子用来放暗色背景图，里面的5块拼图，是5个div，每块拼图都使用背景定位的方式展示背景图的固定区域，中间的拼图做了旋转。但是旋转后，又遇到了个问题：背景图片也跟着旋转了，像下面这样：
解决背景旋转的思路：可以在第5块拼图的外层套一个盒子，将外层盒子向右旋转45度，再将背景的元素向左旋转45度。操作完又发现了新的问题，下面图中的黑色边框是外层盒子（为了方便看，把其他的拼图块都设置为不可见）。如果给外层盒子设置 overflow:hidden ，那么中间拼图的上下左右四个角都会缺失。
我们需要把第五块拼图的宽高设置大一些，再设置它外层的盒子 overflow:hidden。宽高设置大的话，对应的 background-size 也要改变。
最后，就可以实现刚开始的效果了，完整的 vue 代码如下：
<template> <section 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> </section> </template> <script> import bgImg from "@/assets/bg.jpeg"; export default { data() { return { bgImg, item1Show: false, 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%; 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; border-top: 1px solid @borderColor; 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> 益吾库今天分享的这篇关于Web知识:CSS3 菱形拼图实现只旋转div 背景图片不旋转功能的内容到这里就结束了，喜欢的话可以给我们点赞鼓励~
