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

html 背景图片旋转,CSS3只让背景图片旋转180度的实现示例一、心路历程最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度。只通过CSS3的transfrom让整个容器都翻转了一定的角度,达不到我想要的效果。然后通过研究和参考相关文章总算实现了这个效果,话不多说,上代码。二、代码实现HTML模板如下智能感知设备在线率CSS代码.smart_development_right{position:relative;overflow:hi…

大家好,欢迎来到IT知识分享网。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

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

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15215.html

(0)
上一篇 2024-02-19 13:00
下一篇 2024-02-20 13:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信