何给背景图像使用CSS3变形

wolaizheli 2017-06-28

摘要： 如何给背景图像使用CSS3变形呢？在这里，Craig Buckler给出了答案。

CSS3的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下，这个属性已经被所有的现代浏览器所支持。如果想支持黑莓浏览器和安卓版的UC浏览器，你就需要添加-webkit-前缀了。

 

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

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形

 

 

完美！然而，当你使用上述代码时，你会发现元素的内容、边框、背景图片都会发生旋转。那么，怎样才能只旋转背景图片呢？怎样才能只让元素本身旋转，而让其背景图片位置固定呢？

 

 

目前，W3C还没有专门变形背景图片的属性。我相信在不久的将来肯定会出现这个非常实用的属性。但是对于现在想实现相同效果的开发者们来说毫无帮助。

 

万幸，这里有个解决方法。其实，就是一个给父级容器元素before伪元素或者after伪元素添加背景图片的hack。这时，我们就可以独立控制带有背景图片伪元素的变形。

 

只变形背景

为了控制伪元素在其父级容器内定位，其父级容器元素必须设置相对定位(position:relative)。为了防止背景溢出，你也需要给容器元素设置overflow:hidden;

 

#myelement{
  position: relative;
  overflow: hidden;

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形



 

现在，我们来创建一个具有可以变形背景的绝对定位的伪元素。将伪元素的层级设置为-1(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);

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形



 

注意，你需要调整伪元素的宽度、高度和定位。比如，当你使用重复图片做背景时，旋转的区域必须比其所在容器面积大，以此保证全部覆盖容器背景。

 

何给背景图像使用CSS3变形

 

固定一个变形元素的背景

父级容器上的所有变形样式都会继承到其伪元素。因此，我们需要撤销其伪元素的变形样式。例如，如果容器旋转30deg，其伪元素背景必须旋转-30deg，这样背景才能固定到某个位置。

何给背景图像使用CSS3变形​​​​​​​

原文链接

wolaizheli

wolaizheli

相关推荐

CSS3动画旋转——（图片360°旋转）

注意的是，建议这里使用的是插入图片，如果用背景图片的话，那么盒子内的内容也会进行旋转。

zhanghaibing00 / 0评论 2020-07-28

CSS3动画属性有哪些

在平面内进行旋转：transform:rotate value值是以角度为单位，例如30deg.vlaue值1：绕着X轴旋转的角度，value值2：绕着Y轴旋转的角度。参数的设置是逆时针为正值，顺时针为负值。在平面内进行缩放：tansform:scale

冰蝶 / 0评论 2020-03-01

css3的动画属性

　　　　检索或设置对象中的参与过渡的属性。　　　　transition:属性值1 属性值2 属性值3 属性值4；　　　　　　能支持过渡的属性都会被选中进行过渡变换。　　　　属性值4：动画的类型（匀速/linear 匀加速 匀减速 先加速后减速 贝塞尔曲线

somboy / 0评论 2020-02-29

5.5 CSS3 transform变换

1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate 设置盒子旋转4、skew 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设

zengni / 0评论 2020-02-23

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动、缩放、旋转、倾斜 。transform: translate; /* 水平向右移动50px 和 垂直向下移动60px*/. Px为负值,那就变成向左 或者 向上。说明 scale默认值为1,

lanzhusiyu / 0评论 2020-01-12

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动、缩放、旋转、倾斜 。transform: translate; /* 水平向右移动50px 和 垂直向下移动60px*/. Px为负值,那就变成向左 或者 向上。说明 scale默认值为1,

MaureenChen / 0评论 2020-01-01

如何使用 css3 transform 属性来变换背景图

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。这个听起来很赞。目前 W3C 没有关于如何旋转背景图的提案。幸运的是，我们找到一个解决方式。这个元素可以使用任何样式，但一定

AlisaClass / 0评论 2019-11-18

css3的3D

要玩转css3的3d，就必须了解几个词汇，便是透视、旋转和移动。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。

scssqly轩 / 0评论 2019-11-17

css3 新特性（translate 移动，rotate 旋转 ， scale 缩放）

　可以改变元素在页面中的位置，类似定位。　　translate 中的百分比单位是相对自身元素的translate:;　2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。　　还可以给 x y 设置 像素 或者 方位名词。　缩放，顾名思义，可以放大和缩

zengni / 0评论 2019-10-27

css3 transform 3d详解

transform2d的教程网上有很多，但是3d的还是比较少，关于透视研究了很长时间才算是了解，下面详细的解释一下transform中3d变形的原理。让我们来看一下transform-style这个属性，这个属性一定是应用在父元素上的，它有两个值prese

懵懂听风雨 / 0评论 2015-11-12

浅谈CSS3 Filter的10种特效(上)

浅谈CSS3 Filter的10种特效(上)Filter主要是运用在图片上，以实现一些特效。但是，我们主要讨论的是Filter图片上的运用,今天我们先学习前五种效果.1.1. 语法css选择器 {filter: none | filter-function

ozhanjun / 0评论 2019-09-08

CSS3实现的线框球形旋转效果

body {padding:0;margin:0;background:#333;position:relative;}. .ball {height:500px;width:500px;position:absolute;top:50%;left:50%

沈宫新 / 0评论 2018-02-05

CSS3 transform 属性

兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51. transform的含义是：改变，使…CSS3 transform都有哪些常用属性？transfor

lanzhusiyu / 0评论 2018-01-05

CSS3旋转与大小渐变

DOCTYPE html><html><head><meta charset="utf-8"> <title>旋转渐变</title><style> div

走向WEB开发 / 0评论 2017-09-18

3d可旋转 焦点图 ，基于css3，附源码

3d的效果很多，我们之前就分享了很多，这次是基于css3来做的，立方体，6面，每一面都可以看到，可以旋转，可能在实战项目中用到不多，但是很适合做到个人主页里面。

buttonChan / 0评论 2018-04-24

CSS3实现的线框球形旋转效果

①class为y的类需要进行X轴旋转后才可以显现；.ball div {width:100%;height:100%;border-radius:100%;border:solid 1px #fff;position:absolute;top:50%;le

走向WEB开发 / 0评论 2018-02-18

CSS3奇思妙想图形

偶尔看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。/*参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级 */. border-radius:100px 100px 0 0;/* 正方形的

css教程 / 0评论 2018-02-15

CSS3 3D学习笔记

最近学习了CSS3的动画,在这里做一个总结。现在大部分的交互动画,我们都可以使用CSS3来完成,效率更高，并且在移动端上的兼容非常好。但是缺少一种正向编程的快感。旋转:rotate、rotateX、rotateY、rotateZ移动:translate3D

dangzhangjing / 0评论 2019-07-01

基础知识：css3核心知识整理

css3前缀根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8. // -ms-animation（动画 ）transform（转换）。transform: scale; // 缩放：

yaodilu / 0评论 2019-06-30

css3实现元素环绕中心点布局

/* rotateZ控制方向，每个元素旋转30度，12个元素刚好360度。translateY控制每个元素距中心点的距离 */

覆雪蓝枫 / 0评论 2019-06-30

css3属性transform-origin属性讲解

而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况

qiupu / 0评论 2019-06-29

css3实现椭圆轨迹旋转

本篇如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点。

qiupu / 0评论 2019-06-28

3d可旋转 焦点图 ，基于css3，附源码

3d的效果很多，我们之前就分享了很多，这次是基于css3来做的，立方体，6面，每一面都可以看到，可以旋转，可能在实战项目中用到不多，但是很适合做到个人主页里面。

武林半侠 / 0评论 2018-04-24

CSS3实现的线框球形旋转效果

①class为y的类需要进行X轴旋转后才可以显现；.ball div {width:100%;height:100%;border-radius:100%;border:solid 1px #fff;position:absolute;top:50%;le

王为仁 / 0评论 2018-02-18

CSS3奇思妙想图形

偶尔看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。/*参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级 */. border-radius:100px 100px 0 0;/* 正方形的

王景迁 / 0评论 2018-02-15

CSS3 旋转的八卦图

#container{height: 200px;width: 200px;border-radius: 202px;box-shadow: 0 0 4px #666666;margin: 100px auto;

randyjin / 0评论 2018-02-09

CSS3实现的线框球形旋转效果

body {padding:0;margin:0;background:#333;position:relative;}. .ball {height:500px;width:500px;position:absolute;top:50%;left:50%

尚衍亮 / 0评论 2018-02-05

CSS3 transform 属性

兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51. transform的含义是：改变，使…CSS3 transform都有哪些常用属性？transfor

懵懂听风雨 / 0评论 2018-01-05

CSS3旋转与大小渐变

DOCTYPE html><html><head><meta charset="utf-8"> <title>旋转渐变</title><style> div

NARUTOLUOLUO / 0评论 2017-09-18

无限旋转

使用CSS3的animation动画属性实现360°无限循环旋转。CSS样式书写如下：

AlisaClass / 0评论 2017-04-25

15 个非常棒的 CSS3 效果教程

这个教程将创建缩略图的鼠标浮动效果。当鼠标移动到一个缩略图上的时候，我们将显示一些描述并使用不同的样式。类似于老式电影中的那种特效，报纸旋转并固定在屏幕上。

jiedinghui / 0评论 2016-07-03

css3 (二) 手册 02

css3 2D变形处理旋转transform: rotate;// 水平 0.7 垂直 0.5平移transform: translate;// 垂直向下 50px倾斜transform: skew;transform: rotate , scale(0.

王景迁 / 0评论 2019-06-28

css3 动画详解

css3动画：1.transform;2.transition;3.animation; 下面分别详细讲解并解释三者的区别。matrix 使用6哥值得矩阵。第一个参数对应X轴，第二个参数对应Y轴。-webkit-transition:width 2s ea

sdbxpjzq / 0评论 2015-12-04

css3 transform 3d详解

transform2d的教程网上有很多，但是3d的还是比较少，关于透视研究了很长时间才算是了解，下面详细的解释一下transform中3d变形的原理。让我们来看一下transform-style这个属性，这个属性一定是应用在父元素上的，它有两个值prese

liboqiao / 0评论 2015-11-12

CSS3 之 transform & transition & animation

2d转换transform: translate; 沿着 X 和 Y 轴移动元素。transform: scale; 倍数改变元素的宽度和高度。transform-origin: x y; 旋转的基点位置。transform: translateX rot

realitycss / 0评论 2019-06-27

css3动画2 transition 详解（共含有transform transition animate）

CSS3 Transition详解 几个让人头大的单词，可能会混淆，尤其是你过一段不用的话肯定会搞不清各自的意思。transition 今天主要说transition 中文意思过渡，顺便在说一下transform 和translate,transform

liusure0 / 0评论 2015-06-11

css3动画1 transform 详解（共含有transform transition animate）

Transform学习2D转换 图形变换我们能看到的要么是2D的平面变换，还有就是3D的立体变换，当我们看到这些词的时候，“平移”，“旋转”，“拉伸” 这种都是输入2D变换的范畴，转换导致的结构那就是，位置，形状，尺寸等等的改变。transform 英文

zyhui / 0评论 2015-06-10

css3变形之缩放 transform：scale

scale()函数让元素根据中心原点对对象进行缩放。没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

王景迁 / 0评论 2015-03-12

snabbt.js 强大的jQuery动画库插件

snabbt.js是一款轻量级的、功能强大的、简单易用的jQuery动画库插件。snabbt.js提供了丰富的函数和接口来组合各种动画效果，它的过渡动画效果可以和CSS3 transform媲美，是一个非常强大的jquery插件。snabbt.js的每秒传

walliam / 0评论 2015-01-28

CSS3图片旋转,移动

查看演示请在支持CSS3的浏览器上查看。

SuiKaSan的自学室 / 0评论 2014-08-14

CSS3的一些新特性

所设置的width和height不包括padding和border，只对content。从盒模型padding的左上角开始显示背景；

nicepainkiller / 0评论 2014-08-03

用CSS3实现钟表效果

背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。实现过程1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形

liboqiao / 0评论 2019-06-26

CSS3 3D 转换rotateX()、rotateY()

浏览器支持Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换。rotateX() 方法通过 rotateX() 方法，元素围绕其 X

csscode / 0评论 2014-03-03

css3动画系列之rotate() 方法

浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。允许负值，元素将逆时针旋转。div{transform: rotate;

liboqiao / 0评论 2014-02-28

CSS3实现一个旋转的花朵

实现原理：其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！

Alisa0 / 0评论 2019-06-26

CSS3的过渡和动画

过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。translate 移动rotate　旋转scale　缩放skew　倾斜matrix　混合每种转化都还有对应的3d版本。可以通过添加样式　displa

Alisa0 / 0评论 2019-06-26

CSS3 transform 简单使用

<!DOCTYPE html>. background-color : #DEE4EE;color : #305999;width : 380px;height : 70px;line-height : 70px;font-weight : b

LadyZhong / 0评论 2013-03-08

挑选的在线CSS3代码生成工具

今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具，这些工具能够帮助你方便的生成 CSS3 特效。CSS3 是对 CSS 规范的改善和增强，增加了圆角、旋转、阴影、渐变和动画等众多强大的特性，它使得 Web 开发人员可以很容易的在网站中加入时

icecoffeemzp / 0评论 2012-10-04

css3旋转的盒子

工作中一直做普通的网页，今天浏览到一篇做3d旋转的盒子的效果，感觉挺好玩，于是跟着教程练了练，在此做个记录html. </div>camera用来控制景深box包裹立方体六个面face1-6是立方体的六个面css

wangnantjobj / 0评论 2019-06-20