200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html 背景图片旋转 CSS3只让背景图片旋转180度的实现示例

html 背景图片旋转 CSS3只让背景图片旋转180度的实现示例

时间:2020-02-14 02:48:04

相关推荐

html 背景图片旋转 CSS3只让背景图片旋转180度的实现示例

一、心路历程

最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度。

只通过CSS3的transfrom让整个容器都翻转了一定的角度,达不到我想要的效果。

然后通过研究和参考相关文章总算实现了这个效果,话不多说,上代码。

二、代码实现

HTML模板如下

智能感知设备

在线率

CSS代码

.smart_development_right{

position: relative;

overflow: hidden;

}

.wisdomGongdi .gongdi_center .center_top .smart_development_right::before {

content: "";

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: -1;

background: url('/public/smart_equipment.png') 0 0 no-repeat;

transform: rotate(180deg);

}

如果希望向右旋转90度 就把上面代码中的180deg改成90deg

如果希望向左旋转90度 就把上面代码中的180deg改成-90deg

如果思路走的对,那么实现起来就会非常简单。

虽然最后没有用上这个,但还是觉得特别有用,所以跟大家分析一下。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。