应用 css3 transform 特性来转换情况图的方式

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

应用 css3 transform 特性能够随便的转动,歪斜,放缩任何元素。现阶段即便沒有任何前缀还可以在绝绝大多数访问器上很好的应用。

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

这个听起来很赞。但是,这个特性转动了全部元素,包含他的內容、边框、情况图。假如你只是想转动它的情况图而不选转动內容的话,应当如何做呢?或你只想转动內容,而不转动情况图,这个又该如何做呢?

现阶段 W3C 沒有有关怎样转动情况图的提议。我感觉这个是是非非经常见的应用情景,我相信最后也会出来相有关提议,但这对当今就要想完成这个实际效果的开发设计者沒有甚么实际意义。

好运的是,大家寻找1个处理方法。这个方法实质上,是将情况图运用到某个元素的 before 或 after 这类伪类元素上而并不是运用到元素自身。随后在伪类元素单独的应用 transform 特性。

仅仅转换情况

这个元素可使用任何款式,但1定要设定 position 特性,由于其伪类元素会根据它来精准定位。假如不想情况撑到元素外,那就要设定 overflow: hidden。

#myelement {
position: relative;
overflow: hidden;
}

如今大家能够建立1个肯定精准定位的伪类元向来完成转换情况。以便保证他会低于元素內容显示信息,必须设定 z-index: ⑴。

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: ⑸0%;
left: ⑸0%;
z-index: ⑴;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

必须留意的是,在转换的全过程中,你必须去调剂伪类元素的 width,height,position 特性。事例:倘若伪类元素应用了1张可反复的照片做情况,那末转动地区就务必超过父元素,这样才能够在转动全过程中遮盖全部父元素。

在转换的元素上完成固定不动情况

全部主元素的转换实际操作都会危害到伪类元素. 倘若伪类元素不要想转换实际操作时,大家就必须撤消这个转换, 事例:当1个父元素转动了 30 度,那末伪类元素必须相反向转动 30 度,来使伪类元素返回到固定不动部位。

 

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: ⑸0%;
left: ⑸0%;
z-index: ⑴;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(⑶0deg);
transform: rotate(⑶0deg);
}

再度强调,你必须对伪类元素的宽高及精准定位特性开展调剂来保证它能够彻底遮盖主元素

总结

以上所述是网编给大伙儿详细介绍的应用 css3 transform 特性来转换情况图的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!