使用 css3 transform 属性来变换背景图的方法


Posted in HTML / CSS onMay 07, 2019

使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

这个听起来很赞。然而,这个属性旋转了整个元素,包括他的内容、边框、背景图。如果你只是想旋转它的背景图而不选旋转内容的话,应该怎么做呢?或者你只想旋转内容,而不旋转背景图,这个又该怎么做呢?

目前 W3C 没有关于如何旋转背景图的提案。我觉得这个是非常常见的使用场景,我深信最终也会出来相相关提案,但这对当前就想要实现这个效果的开发者没有什么意义。

幸运的是,我们找到一个解决方式。这个方式本质上,是将背景图应用到某个元素的 before 或者 after 这种伪类元素上而不是应用到元素本身。然后在伪类元素独立的使用 transform 属性。

仅仅变换背景

这个元素可以使用任何样式,但一定要设置 position 属性,因为其伪类元素会基于它来定位。如果不想背景撑到元素外,那就要设置 overflow: hidden。

#myelement {
position: relative;
overflow: hidden;
}

现在我们可以创建一个绝对定位的伪类元素来实现变换背景。为了确保他会低于元素内容显示,需要设置 z-index: -1。

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

需要注意的是,在变换的过程中,你需要去调整伪类元素的 width,height,position 属性。例子:假如伪类元素使用了一张可重复的图片做背景,那么旋转区域就必须大于父元素,这样才可以在旋转过程中覆盖整个父元素。

使用 css3 transform 属性来变换背景图的方法

在变换的元素上实现固定背景

所有主元素的变换操作都会影响到伪类元素. 假如伪类元素不想要变换操作时,我们就需要撤销这个变换, 例子:当一个父元素旋转了 30 度,那么伪类元素需要相反方向旋转 30 度,来使伪类元素回退到固定位置。

 

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}

再次强调,你需要对伪类元素的宽高及定位属性进行调整来确保它可以完全覆盖主元素

总结

以上所述是小编给大家介绍的使用 css3 transform 属性来变换背景图的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 #HTML / CSS
移动端rem布局的两种实现方法
Jan 03 #HTML / CSS
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
thinkphp分页实现效果
2016/10/13 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
Python计算字符宽度的方法
2016/06/14 Python
Flask数据库迁移简单介绍
2017/10/24 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
幼儿园中班新学期寄语
2014/01/18 职场文书
部队万能检讨书
2014/02/20 职场文书
无毒社区工作方案
2014/05/23 职场文书
小学语文业务学习材料
2014/06/02 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年组织部工作总结
2015/04/03 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
Python访问Redis的详细操作
2021/06/26 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏