您现在的位置是：网站首页> 编程资料编程资料

CSS3只让背景图片旋转180度的实现示例css3实现背景图片半透明内容不透明的方法示例css3实现背景图片颜色修改的多种方式css3制作的背景渐变动画效果CSS3实现模糊背景的三种效果示例CSS3 菱形拼图实现只旋转div 背景图片不旋转功能基于css3制作的圆形透明画中画视频播放特效JS+CSS3文章内容背景黑白切换特效代码css3实现简单的白云飘动背景特效CSS3 实现的动态星空背景

2021-09-02 1047人已围观

简介这篇文章主要介绍了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

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

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

参考文献

到此这篇关于CSS3只让背景图片旋转180度的实现示例的文章就介绍到这了,更多相关CSS3 背景图片旋转180度内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS3 真的会替代 SCSS 吗详解利用css3的var()实现运行时改变scss的变量值uni-app中使用scss的示例代码scss使用mixin不生效(浏览器无法编译出来)的解决方法手机端用rem+scss做适配的详解前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范

下一篇：css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果CSS实现漂亮的时钟动画效果的实例代码CSS 奇思妙想边框动画效果的实现CSS 动态高度过渡动画效果的实现使用CSS3制作版头动画效果CSS3分享图标按钮动画特效代码CSS3通过var()和calc()函数实现动画特效

您现在的位置是：网站首页> 编程资料编程资料

一、心路历程

二、代码实现

相关内容

点击排行

本栏推荐

猜你喜欢