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

需求背景

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

应用到的知识点：

• background-size
• background-position
• transform：rotate

实现思路：

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

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

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

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

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