使用 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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
深入PHP curl参数的详解
2013/06/17 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python数据集切分实例
2018/12/08 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python 两个数据库postgresql对比
2019/10/21 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
C#笔试题集合
2013/06/21 面试题
打架检讨书50字
2014/01/11 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
2014年安全生产责任书
2014/07/22 职场文书
实训报告范文大全
2014/11/04 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书