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


Posted in HTML / CSS onMarch 09, 2021

一、心路历程

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

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

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

二、代码实现

HTML模板如下

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>智能感知设备</span>
  </div>
  <div class="smart_development_content">
    <span>在线率</span>
  </div>
</div>

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度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现3d旋转动画特效
Mar 10 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 #HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 #HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
You might like
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python 深入理解yield
2008/09/06 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python最小二乘法矩阵
2019/01/02 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Python检查ping终端的方法
2019/01/26 Python
keras中的History对象用法
2020/06/19 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
求职自荐信范文格式
2013/11/29 职场文书
大学生自荐书范文
2013/12/10 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
工作睡觉检讨书
2014/02/25 职场文书
关于环保的建议书400字
2014/03/12 职场文书
师德师风培训感言
2015/08/03 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers