在现代网页设计中，背景图像的使用是非常普遍的。 为了使网页看起来更加生动、有趣，我们可以使用许多不同的方式来呈现背景图像，例如平铺、重复、拉伸等等。而其中一种叫做背景旋转（background-rotation）就是一种很好的选择。在 css3 中，我们可以通过借助 transform 属性、rotate() 函数来完成这种效果。在本文中，我们将会深入了解这个背景旋转的功能，并给出一些应用示例。
CSS3 背景旋转的基本语法
CSS3 的 transform 属性是 CSS 变换的重要属性之一，可以将元素进行旋转、缩放、变形和倾斜等操作。在其中，rotate() 函数就是用来实现旋转的，其语法如下：
transform: rotate(angle);
登录后复制
其中，angle 是一个角度值，也就是你需要旋转的角度。下面是一个简单的示例：
.box {
width: 200px;
height: 200px;
background: url("image.jpg") no-repeat center center;
transform: rotate(45deg);
}
登录后复制
这个样式会将以图片“image.jpg”作为背景的盒子逆时针旋转 45 度
如此一来，我们就可以将顶部背景图片通过旋转变成了一种富有动感的样式，有趣且生动。
CSS3 背景旋转的应用示例
CSS3 背景旋转可以为我们的网页增添生动和鲜活感。下面是一些应用示例。
旋转卡片
卡片式设计在现代网页中使用得非常广泛，它能够将相关内容紧凑地组织在一起，让用户一目了然。而通过运用背景旋转的方式，我们可以让卡片看起来更加具有立体感，增强用户的视觉体验。下面是一个示例：
.card {
width: 300px;
height: 200px;
background: url("image.jpg") no-repeat center center;
border-radius: 10px;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
}
.card:hover {
transform: rotateY(180deg);
}
登录后复制
这个示例会将一张图片“image.jpg”作为卡片的背景，并通过 transform-style 属性和 transition 动画属性来实现旋转的过渡效果。当用户悬停在卡片上时，其中的背景图片就会瞬间旋转 180 度。
旋转菜单
通过应用背景旋转的方式，我们也可以为网页中的菜单栏增加一些特效。在示例中，我们将菜单的每一个项目背景调整为一个只有一条黑色纵线的小小方块，这样就不会使菜单显得太过繁琐。而背景旋转则是为了视觉效果，当用户悬停时方块会转动，以增加动感和趣味性。
.nav {
display: flex;
justify-content: center;
}
.nav-item {
width: 50px;
height: 50px;
margin: 0 10px;
background: #fff;
background-image: linear-gradient(to bottom, #ccc, #ccc 50%, transparent 50%, transparent);
background-size: 10px 10px;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
transition: all .5s ease-in-out;
}
.nav-item:hover {
background-color: #ccc;
transform: rotate(360deg);
}
登录后复制
在这个示例中，我们将菜单项目的背景主要设为白色，在一个圆形的边框内制作了一个小方块。当悬停到菜单项上时，方块会旋转一周，增加菜单的互动性。
总结
通过运用 transform 属性的 rotate() 函数，我们可以让背景图像的旋转效果非常简单地实现，从而增添网页的趣味性和生动性。而通过运用一些创意，例如应用于卡片和菜单等元素，我们甚至可以制作出非常有趣的交互效果。请尝试将这个功能应用到你的网页设计中，给你的用户带来更好的感官体验。
Vue框架设置响应式布局
最近折腾自己的网站，在自适应方面发现有了很多新的方法，感叹前端的技术真是日新月异，从以前只能这样，到现在除了这样，还可以那样，甚至再那样......技术永无止境啊。
回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择，的确，其中的各种xl，xs，栅格布局让响应式变得很容易。
话说，这Vue做响应式，其实一点都不复杂：一个生命周期钩子，一个条指令，一套js判断语句解决，说到这，高手们应该早已经明白如何操作了，这篇文章就给广大刚入门的同学们拓宽一下吧（不熟悉Vue的同学，还是先恶补一下Vue基础吧）。
一个生命周期钩子——mounted：挂载时操作；一条指令——v-show（本例中采用，非绝对）：根据条件显示；一套js判断语句：if/else或者switch/case。具体操作起来很简单：（代码直接展示）
var head = new Vue({
el : "#head",
data : {
//此处省略一千字
show : true
},
mounted : function(){
//可用于设置自适应屏幕，根据获得的可视宽度（兼容性）判断是否显示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})我的目的是在移动设备中不显示搜索栏（search-part）部分，那么利用v-show,和mounted配合，在挂载时检测一下屏幕可视宽度，如果小于1000，则认为是手机，v-show设为false,不显示即可。
看，很简单吧，简单到我觉得自己好像在忽悠。其实到这里，原理已经说完，具体的应用大家可以自行发挥，而且也不一定就用v-show，我这里是为了显示与否，如果大家想添加样式什么的，还可以写别的，甚至于计算属性，watch都可以。只要记住在挂载的时候完成即可，不然页面会有跳动，不利于体验。
可能有人会问，用css的@media就可以完成了，为啥用js，我这里想说的是，我并没有否认@media，这里只是写出更多一种方式，同时结合一下现在很火的前端框架。多一种方法，就多一种解决思路，不至于再回到以前"只能这样"的道路上。具体到实际应用中，当然是最适合的方法为主。前端水深，前端的路子也越来越多，越来也丰富，敞开思维，就会看见不同的天空。
ps一句，js确实需要刷新页面重新加载才会显示，也就是说如果用户将页面从大屏移动到小屏幕，就可能出现布局不响应问题，但是在实际使用中，这种情况几乎不会出现，因为用户不能可能将电脑打开的网页，直接移动到手机上，操作永远都是重新打开，所以js，css在显示效果上是没有区别的（当然如果js太过复杂，性能会有影响）。另外，文中方法的兼容性问题，只要支持Vue的浏览器，都没问题。
就说到这吧，欢迎大神指正，不胜感激！
工作累了吧，可以扫描二维码关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！
