首页 > 网页制作 > CSS

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

admin CSS 2022-02-05 15:11:47 CSS3旋转图片   CSS3   菱形拼图   css3旋转div"

需求背景

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

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

应用到的知识点:

  • background-size
  • background-position
  • transform:rotate

实现思路:

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

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

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

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

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

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



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

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/73139.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持