使用 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进度条分享
Apr 11 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
详解flex:1什么意思
Jul 23 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 高手之路(三)
2006/10/09 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
python简单程序读取串口信息的方法
2015/03/13 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python之mock模块基本使用方法详解
2019/06/27 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python 装饰器的使用示例
2020/10/10 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
XML文档面试题
2015/08/05 面试题
财务人员求职自荐书范文
2014/02/10 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
学校募捐倡议书
2014/05/14 职场文书
Python实现byte转integer
2021/06/03 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL