使用 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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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
德生PL330的评价与改造
2021/03/02 无线电
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python win32 简单操作方法
2017/05/25 Python
python实现多线程网页下载器
2018/04/15 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
详解python的super()的作用和原理
2020/10/29 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
配置管理计划的主要内容有哪些
2014/06/20 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
信访维稳承诺书
2015/05/04 职场文书
音乐剧猫观后感
2015/06/04 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers