CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
发布时间：2021-03-29 15:16:26 作者：蒲公英芽 
我要评论
我要评论这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
需求背景
使用 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>
到此这篇关于CSS3 菱形拼图实现只旋转div 背景图片不旋转功能的文章就介绍到这了,更多相关CSS3旋转图片内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-04-13
- 这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-03-09
前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧2019-11-05
css3实现一个div设置多张背景图片及background-image属性实例演示
这篇文章主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下2017-08-10CSS的background属性及CSS3的背景图片设置总结
这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下2016-06-13- 这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下2016-03-07
- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 背景图片/纹理有很多种使用方式，常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果,需要的朋友可以了解2012-12-19
最新评论