摘要：使用属性可以轻易的旋转，倾斜，缩放任何元素。然而，这个属性旋转了整个元素，包括他的内容边框背景图。再次强调，你需要对伪类元素的宽高及定位属性进行调整来确保它可以完全覆盖主元素。查看上写的使用属性来变换背景图像。
使用 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 属性。例子：假如伪类元素使用了一张可重复的图片做背景，那么旋转区域就必须大于父元素，这样才可以在旋转过程中覆盖整个父元素。
所有主元素的变换操作都会影响到伪类元素. 假如伪类元素不想要变换操作时，我们就需要撤销这个变换， 例子：当一个父元素旋转了 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);
}
再次强调，你需要对伪类元素的宽高及定位属性进行调整来确保它可以完全覆盖主元素。
查看CodePen 上写的DEMO： 使用css3属性来变换背景图像。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116396.html
摘要：使用属性可以轻易的旋转，倾斜，缩放任何元素。然而，这个属性旋转了整个元素，包括他的内容边框背景图。再次强调，你需要对伪类元素的宽高及定位属性进行调整来确保它可以完全覆盖主元素。查看上写的使用属性来变换背景图像。 使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit...
摘要：的新特性大致分为以下六类选择器边框与圆角背景与渐变过渡变换动画下面分别说一说以上六类都有哪些内容选择器基本选择器基本选择器又分为子选择器相邻兄弟选择器通用兄弟选择器群组选择器属性选择器为带有属性的元素设置样式为属性的元素设置样式选择属性值包 CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 ...
摘要：之前张鑫旭博客写的效果讲解得不错啊，既然是大神，应该能搜出点什么，结果一搜，还真有。参考感谢张鑫旭这篇文章好吧，变换，不过如此还有一篇写得不错的，帮助理解和属性最后引用张鑫旭的一句话纯粹从网上些效果代码，那永远就是的命咯 起因 昨晚在做慕课网的十天精通CSS3课程，其中的综合练习是要做一个3D导航翻转的效果。非常高大上。 以往这些效果我都很不屑，觉得网上一大堆这些特效的代码，复制粘贴就...
摘要：淘宝造物节的活动页就是全景的一个很赞的页面，它将全景图分割成等份，相邻的元素构成的夹角，相邻两侧面相对于棱柱中心所构成的夹角。 本文转自凹凸实验室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了，但以前...
阅读 2619·2023-04-26 02:17
阅读 1582·2021-11-24 09:39
阅读 1052·2021-11-18 13:13
阅读 2465·2021-09-02 15:11
阅读 2751·2019-08-30 15:48
阅读 3371·2019-08-30 14:00
阅读 2388·2019-08-29 13:43
阅读 639·2019-08-29 13:07
